/*
 * public/assets/c8-system.css — Word Of Clout agency, C8 round 1.2 (the front door).
 * Binding spec: docs/design/C8-DESIGN-BRIEF.md v1.2 (Claude, 2026-11-12), landed
 * byte-identical from the founder's attachment (sha256 c3e4513b…fbe42, verified
 * before the copy). Design canon above it: docs/design/DESIGN-DIRECTION.md v1.0
 * (founder takeaways T1–T4 → rules R1–R5). Loaded by / this round, AFTER the
 * v4–v7 sheets (append-only: those bytes stand as history; this sheet overrides
 * in cascade order). The later C8 pages load it the same way.
 *
 * THE SYSTEM (brief v1.2 §3/§4): #FFFFFF field; #000000 type, primary buttons
 * and structural lines; #171717 button hover; #525252 secondary text (the
 * lightest allowed); #E5E5E5 hairlines inside content only. RED MEANS ONE
 * THING: THE SPARK. One red element per page and nothing else is red —
 * home: the full stop of "Real moves fast."; every other page: one 8x8px red
 * square before the page label. The status signal square is BLACK. The action
 * arrow stays BLACK on hover. Square corners. No shadows. No gradients.
 * Zero page JS (PERF-C7 class; verified by the round driver set).
 *
 * TYPE (§3): IBM Plex Mono only — 300 display + headings, 400 body, 500 labels,
 * buttons and status lines. Display 64/68 desktop · 40/44 mobile, -0.02em.
 * Second line 28/34 · 22/28, 300. Body 17/28 · 16/26, max 62ch. Label 12/16
 * uppercase 0.15em. Status 14/20 sentence case. 8px grid; section gaps 96px
 * desktop · 64px mobile; frame max 1200px; margins 48px desktop · 20px mobile.
 *
 * THE SPARK (§5), SUPERSEDED + V2 PORT (Tani msg 183 correction, 2026-11-13T04:46Z):
 * brief §5 is superseded on the motion point — the Spark is now the GeoProof
 * decrypt (spark-ref-v2-20261112.zip, sha256 0d211d3d…ee7d, verified): grey
 * pixel static, letters lock 0.45–1.10s, the real h1 + red stamp at 1.20s,
 * second/lead/status RISE (ease allowed on the rise), NOTHING LOOPS — no
 * pixel letters, no spread. The block lives in public/assets/spark.css,
 * loaded after this sheet; the .dbox markup is pasted verbatim; decrypt_gen.py
 * (pack/evidence/M1/tools/v175-spark-v2-port/) is the source of the numbers.
 * Host-page rules inside the reference media blocks (.wrap/.belief/.door)
 * are NOT part of the Spark — home keeps its own here.
 */

:root {
  --c8-field: #FFFFFF;       /* the white field */
  --c8-ink: #000000;         /* type, primary buttons, structural lines */
  --c8-hover: #171717;       /* button hover */
  --c8-secondary: #525252;   /* secondary text — the lightest allowed */
  --c8-hairline: #E5E5E5;    /* hairlines inside content only */
  --c8-cardinal: #C41E3A;    /* the spark — on white only */
}

/* — page frame (§3): max 1200px, side margins 20px mobile · 48px desktop — */
.wrap { padding-left: 20px; padding-right: 20px; }

/* — C8 round 1.1 (Tani, 2026-11-13; verdict: layout fixes only): header
     nav separator dots. The literal " · " text nodes collapse to zero size and
     each link after the first carries its own dot (::before, glued to the link
     it precedes) — a dot can start a line, never end one. Markup unchanged;
     link type stays on the body scale (16 mobile · 17 desktop) — */
header.top nav { font-size: 0; }
header.top nav a { font-size: 16px; }
header.top nav a + a::before { content: "·"; margin: 0 6px; }

/* — type scale (§3), mobile first — */
body { font-size: 16px; line-height: 1.625; }              /* 16/26 */

.c8-hero .c8-second {
  margin: 8px 0 0;
  font-size: 22px; line-height: 28px; font-weight: 300;
  color: var(--c8-ink);
}
.c8-hero .intro { margin: 8px 0 0; font-size: 16px; line-height: 26px; max-width: 62ch; }



/* — availability cluster: the two status lines (C7 text, unchanged) — */
.c8-note {
  margin: 64px 0 0;
  max-width: 62ch;
  font-size: 16px; line-height: 26px;
  color: var(--c8-secondary);
}
.c8-status {
  display: flex; align-items: center;
  margin: 8px 0 0;
  font-size: 14px; line-height: 20px; font-weight: 500;
  color: var(--c8-ink);
}
.c8-signal {
  flex: none;
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 8px;
  background: var(--c8-ink);       /* §4: the status signal square is BLACK — red means the spark only */
}

/* — the two doors: full-width outlined rows, stacked (§6) — */
.c8-doors { margin: 64px 0 0; display: flex; flex-direction: column; gap: 24px; }
.c8-door {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 24px;
  max-width: 100%;
  border: 1px solid var(--c8-ink);
  padding: 24px;
  background: var(--c8-field);
  color: var(--c8-ink);
  text-decoration: none;
}
.c8-door-label {
  grid-column: 1; grid-row: 1;
  margin: 0;
  font-size: 22px; line-height: 28px; font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--c8-ink);
}
.c8-door-desc {
  grid-column: 1; grid-row: 2;
  margin: 0;
  max-width: 62ch;
  font-size: 16px; line-height: 26px;
  color: var(--c8-ink);
}
.c8-arrow {
  grid-column: 2; grid-row: 1 / span 2;
  align-self: center;
  margin: 0;
  font-size: 24px; line-height: 1;
  color: var(--c8-ink);
}

/* — anticipation, then payoff (§6): door rows — on hover/focus the 1px border
     becomes 2px and the arrow moves 6px, 160ms ease-out. THE ARROW STAYS BLACK
     (§4 — red is the spark only). Nothing else has a hover effect. — */
.c8-door:focus-visible { outline: 2px solid var(--c8-ink); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  /* v2.1 rule-5 class fix (2026-11-13): border-width ONLY is transitioned —
   * the reference .door{transition:border-width 160ms ease-out} — because the
   * ≤299px reflow block flips .c8-door padding/gap, and a transitioned padding
   * would run a 160ms "replay" animation on every 299→300px viewport change
   * (B10: nothing replays; caught by verify2 v2.1's new 195px leg). Padding and
   * gap jump, border-width animates — at rest the 1px border + −1px padding
   * still cancel exactly, the reference's own hover trade. */
  .c8-door { transition: border-width 160ms cubic-bezier(0.25, 0.10, 0.25, 1); }
  .c8-arrow { transition: transform 160ms cubic-bezier(0.25, 0.10, 0.25, 1); }
  .c8-door:hover, .c8-door:focus-visible { border-width: 2px; padding: 23px; }   /* 2px line, content never shifts */
  .c8-door:hover .c8-arrow, .c8-door:focus-visible .c8-arrow { transform: translateX(6px); }
}

/* — THE SPARK v2.1 rule 5, host half (Claude reference spark-ref-v2.1-20261113.zip
 *     sha256 de3ecb86…50c0, at ≤299px: doors tighten so nothing scrolls sideways
 *     down to 195px; the content cells may shrink (min-width:0, the reference's
 *     .door>div{min-width:0}) and the label steps to 18/24 (the reference's
 *     .door h2 18/24). The ≤340px header wrap is already ours at every width
 *     (V141-05 flex-wrap, v4-arrival.css) — nothing added there. The .dbox
 *     24/27 Spark rule lives in spark.css, ported VERBATIM. Placed AFTER the
 *     no-preference hover block so the 15/12→14/11 tightening wins the cascade
 *     under the same 1px→2px border + −1px padding law (content never shifts). — */
@media (max-width:299px){
  .c8-door { gap: 4px 12px; padding: 15px 12px; }
  .c8-door .c8-door-label, .c8-door .c8-door-desc { min-width: 0; }
  .c8-door-label { font-size: 18px; line-height: 24px; }
}
@media (prefers-reduced-motion: no-preference) and (max-width:299px){
  .c8-door:hover, .c8-door:focus-visible { padding: 14px 11px; }
}

/* — desktop >=1440 (§3): frame margins, type scale, spark geometry — */
@media (min-width: 1440px) {
  .wrap { padding-left: 48px; padding-right: 48px; }
  header.top { padding-left: 48px; padding-right: 48px; }
  footer.bottom { padding-left: 48px; padding-right: 48px; }
  /* C8 round 1.1 (Tani, 2026-11-13): the footer's own content edge re-aligned
     with the main content edge — the v4 `footer.bottom .wrap` padding-0
     override left the footer text 48px left of every content column above it;
     this sheet re-states the wrap padding in cascade order — */
  footer.bottom .wrap { padding-left: 48px; padding-right: 48px; }
  body { font-size: 17px; line-height: 1.647; }     /* 17/28 */
  header.top nav a { font-size: 17px; }             /* the body scale the nav links keep (round 1.1 glue) */
  .c8-hero .c8-second { font-size: 28px; line-height: 34px; }
  .c8-hero .intro { font-size: 17px; line-height: 28px; }
  .c8-note { margin-top: 96px; font-size: 17px; line-height: 28px; }
  .c8-doors { margin-top: 96px; }
  .c8-door-label { font-size: 28px; line-height: 34px; }
  .c8-door-desc { font-size: 17px; line-height: 28px; }
}

/* — THE PAGE SYSTEM (C8 round 2, ORDER WO-AG-20261113-N T1.5, 2026-11-13):
     every NON-HOME page carries the system — the type, the 1px lines, the C7
     footer, ONE 8x8 red square before the page label (§4: red means the spark
     — exactly one red element per page; the status signal square is BLACK),
     and the same rise on load for label, H1 and lead (opacity + 12px, 600ms
     ease, staggered 0/150/300ms via .rise/--t in spark.css, which every page
     loads after this sheet). No decrypt and no spread off home. Nothing
     loops anywhere (§8: only opacity and transform animate; every animation
     ends by 2200ms — B4/B6 hold by construction). — */

.c8-sq {
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 8px;
  background: var(--c8-cardinal);   /* the page's one red element (B3) */
}

main.c8-page .eyebrow {
  font-size: 12px;                  /* §3: label 12/16 uppercase 0.15em, 500 */
  line-height: 16px;
}
main.c8-page h1 {
  font-weight: 300;                /* §3: display 300, -0.02em */
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.02em;
}

@media (min-width: 721px) {
  main.c8-page h1 { font-size: 64px; line-height: 68px; }
}

/* — the repeated primary action at the end (§6) + the closing block above it
     (§3.1, brands) and the local-business heading above the First Campaign
     panel (§3.1, brands). Second-heading scale: 22/28 mobile · 28/34 desktop. — */
.c8-repeat { padding-top: 64px; }
.c8-repeat .action { margin: 0; }
.c8-close, .c8-panel-head {
  max-width: 62ch;
  margin: 0 0 32px;
  font-size: 22px; line-height: 28px;
  font-weight: 300;
}
@media (min-width: 1440px) {
  .c8-close, .c8-panel-head { font-size: 28px; line-height: 34px; }
}
.c8-close { margin-bottom: 24px; }

/* — v183 (Tani msg 224, Claude's C8 screen verdict fix 1, 2026-11-13):
     the brands local-business heading sat glued under the write-line with
     no space (settled capture, both widths). 48px above it at desktop,
     40px at 720 and below. — */
.c8-panel-head { margin-top: 48px; padding: 0; }
@media (max-width: 720px) {
  .c8-panel-head { margin-top: 40px; }
}