/* ═══════════════════════════════════════════════════════════════════════════
   assembl · the visual system
   ───────────────────────────────────────────────────────────────────────────
   Built 1 August 2026 after Kate's note: "it's just text and waffle and no
   great images". The demos were essays with widgets dropped in. This is the
   opposite: a small number of very large moments, real photography, and type
   that behaves like a magazine rather than a document.

   THE FIVE RULES THIS FILE ENFORCES
   1. One idea per screen. If two ideas share a viewport, one of them is wrong.
   2. Photography is structural, never decorative. Full-bleed or half-bleed,
      never a thumbnail.
   3. Type carries hierarchy — scale and space, not colour and weight.
      Display type starts at 64px and goes up.
   4. Whitespace is the product. Sections breathe at 12-18vh, not 88px.
   5. The interactive moment is the biggest object on its screen. If the demo
      is smaller than the paragraph explaining it, the page has failed.

   PER-CLIENT: set --sysA (accent) and --sysInk on the section or :root.
   Everything else inherits. Paper white ground always — never dark by
   default (design constitution §7).
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --sys-paper:#FCFCFA;
  --sys-ink:#14161A;
  --sys-body:#4A4F57;
  --sys-mute:#878D96;
  --sys-line:rgba(20,22,26,.10);
  --sysA:#2F4F44;                     /* overridden per client */
  --sys-display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sys-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
}

/* ── 1. THE PHOTOGRAPHIC HERO ────────────────────────────────────────────────
   Full-bleed image, type sitting on it with a legibility scrim that never
   exceeds what the text needs. No boxes, no cards, no glass. */
.sysHero{position:relative;min-height:min(92vh,900px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--sys-ink)}
.sysHero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sysHero__scrim{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,11,13,.86) 0%,rgba(10,11,13,.55) 32%,rgba(10,11,13,.12) 62%,transparent 82%)}
.sysHero__in{position:relative;width:100%;max-width:1240px;margin:0 auto;
  padding:0 clamp(24px,5vw,64px) clamp(56px,9vh,110px)}
.sysHero__kick{font-family:var(--sys-sans);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  font-weight:700;color:rgba(255,255,255,.72);margin-bottom:22px}
.sysHero h1{font-family:var(--sys-display);font-weight:400;color:#fff;
  font-size:clamp(46px,8.4vw,124px);line-height:.98;letter-spacing:-.022em;margin:0;max-width:16ch}
.sysHero h1 em{font-style:italic;color:#fff;opacity:.92}
.sysHero__sub{font-family:var(--sys-sans);font-size:clamp(16px,1.5vw,20px);line-height:1.5;font-weight:300;
  color:rgba(255,255,255,.86);max-width:46ch;margin-top:26px}
.sysHero__meta{font-family:var(--sys-sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.22);
  display:flex;gap:26px;flex-wrap:wrap}

/* ── 2. THE STATEMENT — one sentence, one screen ─────────────────────────── */
.sysSay{background:var(--sys-paper);padding:clamp(90px,16vh,190px) clamp(24px,5vw,64px)}
.sysSay__in{max-width:1100px;margin:0 auto}
.sysSay p{font-family:var(--sys-display);font-weight:400;color:var(--sys-ink);
  font-size:clamp(30px,4.6vw,62px);line-height:1.12;letter-spacing:-.018em;margin:0;max-width:20ch}
.sysSay p em{font-style:italic;color:var(--sysA)}
.sysSay__note{font-family:var(--sys-sans);font-size:15px;line-height:1.65;color:var(--sys-body);
  font-weight:300;max-width:52ch;margin-top:34px}

/* ── 3. THE STAGE — the interactive moment, at full size ─────────────────── */
.sysStage{background:var(--sys-paper);padding:clamp(70px,12vh,140px) clamp(24px,5vw,64px)}
.sysStage__in{max-width:1240px;margin:0 auto}
.sysStage__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:48px;
  align-items:end;margin-bottom:clamp(38px,6vh,72px)}
@media(max-width:900px){.sysStage__head{grid-template-columns:1fr;gap:20px}}
.sysStage__kick{font-family:var(--sys-sans);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  font-weight:700;color:var(--sysA);margin-bottom:16px}
.sysStage h2{font-family:var(--sys-display);font-weight:400;font-size:clamp(34px,5.4vw,74px);
  line-height:1.02;letter-spacing:-.02em;color:var(--sys-ink);margin:0;max-width:15ch}
.sysStage__sub{font-family:var(--sys-sans);font-size:16px;line-height:1.6;font-weight:300;
  color:var(--sys-body);max-width:44ch}
/* the moment itself — never smaller than half the viewport */
.sysStage__floor{min-height:min(70vh,720px);display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--sys-line);border-radius:26px;
  padding:clamp(26px,5vw,64px);box-shadow:0 40px 100px -60px rgba(20,22,26,.4)}
.sysStage__floor > *{width:100%}
/* when the moment is a phone, let it be a large one */
.sysStage__floor .wp,.sysStage__floor [id$="-mount"]{transform-origin:center}
@media(min-width:1000px){.sysStage--phone .sysStage__floor{padding:clamp(40px,6vh,80px)}
  .sysStage--phone .sysStage__floor .wp{zoom:1.28}}

/* ── 4. THE SPLIT — photograph beside a single claim ─────────────────────── */
.sysSplit{display:grid;grid-template-columns:1fr 1fr;min-height:min(78vh,780px);background:var(--sys-paper)}
@media(max-width:900px){.sysSplit{grid-template-columns:1fr}}
.sysSplit__img{position:relative;overflow:hidden;min-height:340px}
.sysSplit__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sysSplit__txt{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,7vw,96px)}
.sysSplit__txt h3{font-family:var(--sys-display);font-weight:400;font-size:clamp(28px,3.6vw,52px);
  line-height:1.06;letter-spacing:-.018em;color:var(--sys-ink);margin:0 0 22px;max-width:16ch}
.sysSplit__txt p{font-family:var(--sys-sans);font-size:16.5px;line-height:1.62;font-weight:300;
  color:var(--sys-body);max-width:42ch;margin:0}

/* ── 5. THE NUMBERS — proof, set like a certificate not a dashboard ─────── */
.sysFig{background:var(--sys-paper);padding:clamp(70px,12vh,150px) clamp(24px,5vw,64px)}
.sysFig__in{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,5vw,80px)}
@media(max-width:820px){.sysFig__in{grid-template-columns:1fr;gap:44px}}
.sysFig__n{font-family:var(--sys-display);font-weight:400;font-size:clamp(52px,7vw,104px);line-height:.92;
  letter-spacing:-.03em;color:var(--sysA)}
.sysFig__l{font-family:var(--sys-sans);font-size:15px;line-height:1.55;color:var(--sys-body);
  font-weight:300;margin-top:18px;padding-top:18px;border-top:1px solid var(--sys-line);max-width:30ch}
.sysFig__src{font-family:var(--sys-sans);font-size:11px;letter-spacing:.08em;color:var(--sys-mute);margin-top:10px}

/* ── 6. QUIET RHYTHM for anything that stays as prose ────────────────────── */
.sysProse{background:var(--sys-paper);padding:clamp(60px,10vh,120px) clamp(24px,5vw,64px)}
.sysProse__in{max-width:660px;margin:0 auto}
.sysProse__in p{font-family:var(--sys-sans);font-size:17px;line-height:1.72;font-weight:300;
  color:var(--sys-body);margin:0 0 22px}
.sysProse__in p b{color:var(--sys-ink);font-weight:600}

/* ── accessibility & motion ─────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){.sysHero__img{transform:none!important}}
.sysHero img,.sysSplit__img img{will-change:auto}