/* ══════════════════════════════════════════════════════════════════════════
   StengelM3 public site · site.css

   Page-level classes (.site-*) for a public long-scroll page. Depth has no
   layout for this shape (layouts.md law 1: a page that is none of the four
   app layouts is the page's own), so the page is built here from Depth's
   components, role tokens and the space scale. UI Control, 2026-10-10.

   Rules kept: role tokens only. The only hex values are the two SM3 seeds
   below; the only plain pixel numbers are the two breakpoints, because CSS
   cannot read a token inside a query. No gradient, glow or hover lift; no
   pill buttons; one .btn-primary per section. tools/check_site.py holds
   this file to those rules.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* SM3 primary seed (Asset_Gen1 _shared/colors/colors.json "SM3"). Yellow stays in the mark only. */
  --accent-base: #2C6E9E;
  --mark-base: #2C6E9E;

  /* Minted for this page; Depth names none of these. */
  --site-max: calc(var(--sp-7) * 17);                      /* widest line of content */
  --site-gutter: var(--sp-4);                              /* page edge to content, both sides */
  --site-section-gap: var(--sp-8);                         /* between sections */
  --site-fs-hero: clamp(var(--fs-display), 3vw + 1rem, calc(var(--fs-display) * 1.6));
  --site-fs-lead: calc(var(--fs-subtitle) * 1.125);
  --site-lh-prose: calc(var(--lh-body) + var(--sp-1));
  --site-card-min: calc(var(--sp-7) * 4);
  --site-step-min: calc(var(--sp-7) * 3);
  --site-field-min: calc(var(--sp-7) * 3);
  --site-brand-mark-h: var(--sp-5);
  /* The wordmark beside the mark, in the lockup's own proportions (bank: lockup-light.svg, mark 100 tall,
     wordmark 62 tall, 35 apart). */
  --site-brand-word-h: calc(var(--site-brand-mark-h) * 0.62);
  --site-brand-gap: calc(var(--site-brand-mark-h) * 0.35);
}

html { background: var(--surface-floor); }
/* A link to a section glides there; a visitor who asked for less motion jumps as before. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
.site {
  margin: 0;
  background: var(--surface-floor);
  color: var(--ink-1);
  font: var(--fw-regular) var(--fs-subtitle)/var(--site-lh-prose) var(--font-ui);
}

/* One measure for every row of the page, so the left and right margins match. */
.site-wrap {
  width: 100%;
  max-width: calc(var(--site-max) + 2 * var(--site-gutter));
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

/* Skip link: off screen until it takes focus. */
.site-skip { position: absolute; inset-inline-start: var(--site-gutter); inset-block-start: var(--sp-2);
             padding: var(--sp-2) var(--sp-3); background: var(--surface-3); }
.site-skip:not(:focus-visible) { clip-path: inset(50%); width: var(--line-w); height: var(--line-w); overflow: hidden; padding: 0; }

/* ── Top bar ───────────────────────────────────────────────────────────── */
.site-top { background: var(--surface-1); border-bottom: var(--line-w) solid var(--line-subtle); }
.site-top-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
                gap: var(--sp-2) var(--sp-4); padding-block: var(--sp-2); }
.site-brand { display: inline-flex; align-items: center; gap: var(--site-brand-gap); min-height: var(--ctl-h);
              color: var(--ink-1); text-decoration: none; border-radius: var(--radius-ctl); }
.site-brand:focus-visible { outline: var(--focus-w) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.site-brand-mark { display: block; width: auto; height: var(--site-brand-mark-h); }
.site-brand-word { display: block; width: auto; height: var(--site-brand-word-h); }
.site-nav { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-inline-end: calc(-1 * var(--sp-3)); }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.site-hero { padding-block: var(--site-section-gap); }
.site-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--sp-6); }
.site-eyebrow { margin: 0 0 var(--sp-3); color: var(--accent-ink);
                font: var(--fw-strong) var(--fs-body)/var(--lh-body) var(--font-ui); }
.site-h1 { margin: 0; font: var(--fw-strong) var(--site-fs-hero)/1.15 var(--font-display); text-wrap: balance; }
.site-keep { white-space: nowrap; }   /* a hyphenated word stays on one line */
.site-lead { margin: var(--sp-4) 0 0; color: var(--ink-2);
             font-size: var(--site-fs-lead); line-height: var(--site-lh-prose); text-wrap: pretty; }
.site-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.site-hero-art { padding: var(--sp-4); }

/* A picture well: Depth's panel line with nothing behind the picture (Carter, 2026-10-10). The renders have no
   ground of their own, so the page shows through. */
.site-photo, .site-shot { background: transparent; }
.site-photo-img { display: block; width: 100%; height: auto; }

/* ── Sections ──────────────────────────────────────────────────────────── */
.site-section { padding-block: 0 var(--site-section-gap); }
.site-h2 { margin: 0; font: var(--fw-strong) var(--fs-display)/var(--lh-display) var(--font-display); }
.site-h3 { margin: 0; font: var(--fw-strong) var(--fs-subtitle)/var(--lh-subtitle) var(--font-ui); }
.site-intro { margin: var(--sp-2) 0 0; color: var(--ink-2); }
.site-text { margin: 0; color: var(--ink-2); text-wrap: pretty; }

.site-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--site-card-min)), 1fr));
              gap: var(--sp-4); margin: var(--sp-5) 0 0; padding: 0; list-style: none; }
.site-card { display: grid; align-content: start; gap: var(--sp-3); padding: var(--sp-5); }
.site-card-icon { display: grid; place-items: center; width: var(--ctl-h); height: var(--ctl-h);
                  border: var(--line-w) solid var(--line-subtle); border-radius: var(--radius-ctl);
                  background: var(--surface-sunken); color: var(--accent-ink); }

.site-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--site-card-min)), 1fr));
              gap: var(--sp-4); margin-top: var(--sp-5); }
.site-shot { margin: 0; overflow: hidden; }
/* Every well is the same shape; the picture is fitted whole inside it, whatever its own shape. */
.site-shot-well { position: relative; aspect-ratio: 5 / 4; }
.site-shot-well > .site-photo-img { position: absolute; inset: var(--sp-4);
                                    width: calc(100% - 2 * var(--sp-4)); height: calc(100% - 2 * var(--sp-4)); object-fit: contain; }

.site-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--site-step-min)), 1fr));
              gap: var(--sp-5) var(--sp-4); margin: var(--sp-5) 0 0; padding: 0; list-style: none; }
.site-step { display: grid; align-content: start; gap: var(--sp-2); padding-top: var(--sp-3);
             border-top: var(--underline-w) solid var(--line-strong); }
.site-step-num { color: var(--accent-ink); font: var(--fw-strong) var(--fs-title)/var(--lh-title) var(--font-display); }

.site-contact { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start;
                gap: var(--sp-5) var(--sp-7); padding: var(--sp-5); }
.site-contact-text { display: grid; gap: var(--sp-2); }

/* The contact form: Depth's .field-group / .field / .btn, laid out here. */
.site-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--site-field-min)), 1fr)); gap: var(--sp-4); }
.site-form-span { grid-column: 1 / -1; }
.site-form .field { font-size: var(--fs-subtitle); }   /* a phone zooms the page on a field with smaller text */
.site-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); }
/* The spam trap: a box no person sees or reaches; a program that ticks it is dropped by the form service. */
.site-trap { position: absolute; width: var(--line-w); height: var(--line-w); overflow: hidden; clip-path: inset(50%); }

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-foot { border-top: var(--line-w) solid var(--line-subtle); background: var(--surface-1); }
.site-foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-4);
                 padding-block: var(--sp-4); }

/* ── Narrow screens ────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .site-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .site-contact { grid-template-columns: minmax(0, 1fr); }
  :root { --site-section-gap: var(--sp-7); }
}
@media (max-width: 420px) {
  .site-nav { margin-inline-start: calc(-1 * var(--sp-3)); margin-inline-end: 0; }
}