/* GENERATED from sohow-brand@2f6ac88 (2026-10-01) by scripts/sync-brand.sh — DO NOT EDIT. Master: sohow-brand. Record: brand Saga e-b0aa776f87df */
/* =============================================================
   So How — public page frame (MOBILE FIRST)
   The one frame every public web page uses: a single reading
   column, a header carrying the So How mark, and a footer with
   the company particulars. Rendered by the sohow-site page
   template (site Saga e-297e78f65611); never re-declared in a page.

   Mobile first: every rule below the media queries is the PHONE
   layout (360px up). Wider screens only ADD space via min-width
   queries at the Surface breakpoints (768 / 1100). Tokens only —
   no new colours, no extra type sizes.
   Rules honoured: brand.css body text 16px+ (no iOS zoom); tap
   targets >= 44px; no horizontal scroll; the full So How mark
   never below 25mm / ~95px — the quotation size (brand logo mechanics).
   ============================================================= */

/* ---- phone (base) ------------------------------------------ */

.page-wrap {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-3) var(--space-6);
  overflow-wrap: anywhere;          /* long emails/URLs never force sideways scroll */
}

.page-head {
  text-align: center;
  margin-bottom: var(--space-5);
}

.page-head a {
  display: inline-block;            /* the mark is the home link — a full-size tap target */
}

.page-mark {
  display: block;
  height: 96px;                     /* the one minimum: 25mm ≈ 95px, as on quotations */
  width: auto;
  max-width: 100%;
  margin: 0 auto var(--space-3);
}

.page-rule {
  width: 36px;
  height: 3px;
  margin: var(--space-3) auto;
  border: none;
  border-radius: var(--radius-full);
  background: var(--accent);
}

.page-meta {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page-body h2 {
  margin: var(--space-5) 0 var(--space-2);
}

.page-body p,
.page-body ul,
.page-body ol {
  margin-bottom: var(--space-3);
}

.page-body ul,
.page-body ol {
  padding-left: var(--space-4);
}

.page-body a {
  padding: var(--space-1) 0;        /* taller hit area for inline links */
}

.lede {
  font-size: 18px;
  color: var(--muted);
  margin-bottom: var(--space-4);
}

/* A labelled card for one fact: label, value, optional note. */
.fact-card {
  margin: var(--space-3) 0;
}

.fact-card .fact-label {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}

.fact-card .fact-value {
  font-family: 'Zilla Slab', serif;
  font-weight: 700;
  font-size: 24px;
}

.fact-card .fact-value a {
  display: inline-block;
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
}

.fact-card .fact-value a:hover {
  color: var(--accent);
}

.fact-card .fact-note {
  font-size: 13px;
  color: var(--muted);
  margin-top: var(--space-2);
}

.page-foot {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page-foot nav {
  display: flex;
  flex-wrap: wrap;                  /* links wrap onto lines on a phone, never shrink */
  justify-content: center;
  gap: 0 var(--space-3);
}

.page-foot nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;                 /* thumb-sized tap targets */
  color: var(--muted);
  text-decoration: none;
}

.page-foot nav a:hover {
  color: var(--text);
}

.page-foot .page-particulars {
  display: block;
  margin-top: var(--space-3);
  line-height: 1.8;
}

/* ---- tablet and up: only adds space ------------------------ */

@media (min-width: 768px) {
  .page-wrap {
    padding: var(--space-6) var(--space-4) calc(var(--space-6) * 2);
  }
  .page-head {
    margin-bottom: var(--space-6);
  }
  .lede {
    margin-bottom: var(--space-5);
  }
  .page-foot {
    padding-top: var(--space-5);
  }
}