/*
  AceLM site design system (2026-10 redesign)

  Direction: "the working drawing". AceLM is about planned, reviewed, verified
  engineering work, so the site borrows from the materials of that work:
  warm paper, ink, ruled grids, margin notes, and the felt-green of a card
  table used sparingly as the brand accent. Card names (Jack, Queen, King,
  Deck, Dealer) appear as precise, restrained marks rather than casino décor.

  Type: Source Serif 4 Display (headlines, the voice), IBM Plex Sans (body),
  IBM Plex Mono (labels, commands, status). Both families are SIL OFL 1.1.
*/

@font-face { font-family: "AceLM Serif"; src: url("../fonts/source-serif-display-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "AceLM Serif"; src: url("../fonts/source-serif-display-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "AceLM Serif"; src: url("../fonts/source-serif-display-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "AceLM Sans"; src: url("../fonts/plex-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "AceLM Sans"; src: url("../fonts/plex-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "AceLM Sans"; src: url("../fonts/plex-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "AceLM Mono"; src: url("../fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "AceLM Mono"; src: url("../fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* Paper and ink */
  --paper: #f5f1e8;
  --paper-2: #ece6d8;
  --paper-3: #e2dac8;
  --card: #fbf8f1;
  --ink: #16191d;
  --ink-2: #3a3f45;
  --ink-3: #5d636a;      /* 5.6:1 on --paper */
  --rule: #cfc6b2;
  --rule-strong: #a99f88;

  /* Accents */
  --felt: #1e5a46;       /* card-table green: primary accent, 7.2:1 on paper */
  --felt-deep: #143f31;
  --felt-tint: #dce8df;
  --vermilion: #b43a1e;  /* the red suit: used for "needs attention", 5.6:1 on paper */
  --vermilion-tint: #f3ddd3;
  --ochre: #8a5a10;      /* waiting / planned, 5.8:1 on paper */
  --ochre-tint: #f1e5c9;

  /* Night (for the terminal and the closing band) */
  --night: #14181c;
  --night-2: #1d2328;
  --night-ink: #e9e4d8;
  --night-ink-2: #a8aca9;
  --night-felt: #7fc4a4;

  --font-serif: "AceLM Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-sans: "AceLM Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "AceLM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --measure: 66ch;
  --wrap: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 3px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body::before {
  /* the faint ruled grid of a drafting sheet */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(22, 25, 29, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22, 25, 29, 0.035) 1px, transparent 1px);
  background-size: 32px 32px;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--felt); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--felt-deep); }
:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--felt-tint); color: var(--ink); }

h1, h2, h3, h4 { margin: 0; font-weight: 400; color: var(--ink); }
h1, h2 { font-family: var(--font-serif); letter-spacing: -0.015em; line-height: 1.08; }
h3 { font-family: var(--font-sans); font-weight: 600; font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.005em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 0.6rem 1rem;
  font-family: var(--font-mono); font-size: 0.85rem; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* Labels: the margin-note voice */
.label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.label .mark { color: var(--felt); }
.label-red .mark { color: var(--vermilion); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245, 241, 232, 0.94);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: saturate(1.2) blur(6px);
}
.site-header .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); text-decoration: none; }
.brand-mark { width: 22px; height: 30px; flex: none; }
.brand-name { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1; }
.brand-cli { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-3); border: 1px solid var(--rule-strong); padding: 0.05rem 0.35rem; border-radius: 2px; }
.site-nav { display: flex; gap: 0; margin-left: auto; align-items: center; flex-wrap: nowrap; }
.site-nav a {
  color: var(--ink-2); text-decoration: none; font-size: 0.92rem; padding: 0.4rem 0.55rem; border-radius: 2px; white-space: nowrap;
}
.site-nav a:hover { color: var(--ink); background: var(--paper-2); }
.site-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--felt); }
.stage-tag {
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--ochre);
  border: 1px solid currentColor; padding: 0.15rem 0.5rem; border-radius: 2px; white-space: nowrap;
}
.nav-toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--rule-strong);
  color: var(--ink); padding: 0.45rem 0.6rem; border-radius: 2px; cursor: pointer; font: inherit;
}
.nav-toggle svg { width: 18px; height: 18px; }

/* One persistent action in the header, visible at every width (review 04). */
.header-cta {
  flex: none; font-size: 0.9rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  color: var(--paper); background: var(--ink); border: 1px solid var(--ink);
  padding: 0.45rem 0.85rem; border-radius: var(--radius);
}
.header-cta:hover { background: var(--felt-deep); border-color: var(--felt-deep); color: var(--paper); }
.header-cta:focus-visible { outline: 2px solid var(--felt); outline-offset: 3px; }
.header-cta[aria-current="page"] { background: transparent; color: var(--ink); }
@media (max-width: 400px) { .brand-cli { display: none; } .header-cta { padding: 0.4rem 0.6rem; font-size: 0.85rem; } .nav-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

@media (max-width: 1040px) {
  .site-header .wrap { gap: 0.75rem; }
  .nav-toggle { display: inline-flex; align-items: center; gap: 0.5rem; order: 3; margin-left: 0; }
  .header-cta { margin-left: auto; }
  .stage-tag { display: none; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: 0.5rem var(--gutter) 1rem; display: none;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 0.8rem 0; border-bottom: 1px solid var(--paper-3); font-size: 1.05rem; }
  .site-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--felt); padding-left: 0.75rem; }
}

@media (max-width: 1300px) and (min-width: 1041px) { .stage-tag { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-sans); font-weight: 500; font-size: 1rem;
  padding: 0.8rem 1.2rem; border-radius: var(--radius); text-decoration: none; cursor: pointer;
  border: 1px solid var(--ink); transition: background 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease);
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--felt-deep); border-color: var(--felt-deep); color: var(--paper); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--paper-2); color: var(--ink); }
.btn .arrow { transition: transform 160ms var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* ---------- Hero ---------- */
.hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4.5rem); border-bottom: 1px solid var(--rule); position: relative; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  font-weight: 400;
  margin: 1.1rem 0 1.4rem;
}
.hero h1 em { font-style: italic; color: var(--felt); }
.tagline {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.35;
  color: var(--ink-2);
  max-width: 34ch;
  margin: 0 0 1.75rem;
  padding-left: 1rem;
  border-left: 3px solid var(--felt);
}
.hero-figure { position: relative; }
.hero-figure figcaption { margin-top: 0.85rem; }
.hero-for { font-size: 1.05rem; color: var(--ink-2); max-width: 46ch; margin: -0.5rem 0 1.75rem; }
.hero-note { margin-top: 1.4rem; font-size: 0.9rem; color: var(--ink-3); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-figure { order: 2; }
}

/* ---------- Sections ---------- */
.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; border-bottom: 1px solid var(--rule); }
.section:last-of-type { border-bottom: 0; }
.section-head { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 2rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); align-items: start; }
.section-head h2 { font-size: clamp(2rem, 3.6vw, 3rem); max-width: 22ch; }
.section-head .lede { grid-column: 2; font-size: 1.15rem; color: var(--ink-2); max-width: var(--measure); margin-top: 1rem; }
@media (max-width: 760px) {
  .section-head { grid-template-columns: 1fr; gap: 0.75rem; }
  .section-head .lede { grid-column: 1; }
}
.prose { max-width: var(--measure); }
.prose p { font-size: 1.1rem; }
.prose-lg p { font-size: 1.2rem; line-height: 1.55; color: var(--ink-2); }

/* The description block: verbatim approved copy, set as a statement */
.statement {
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 2rem; align-items: start;
}
.statement-body p {
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  line-height: 1.32;
  color: var(--ink);
  max-width: 34ch;
}
.statement-body p + p { margin-top: 1.1rem; color: var(--ink-2); }
@media (max-width: 760px) { .statement { grid-template-columns: 1fr; gap: 1rem; } }

/* Contrast pair: one assistant vs a team */
.contrast { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule-strong); background: var(--card); }
.contrast > div { padding: clamp(1.5rem, 3vw, 2.25rem); }
.contrast > div + div { border-left: 1px solid var(--rule-strong); background: #fff; }
.contrast h3 { margin: 0.6rem 0 0.75rem; font-family: var(--font-serif); font-weight: 400; font-size: 1.6rem; }
.contrast ul { margin: 0; padding: 0; list-style: none; }
.contrast li { padding: 0.55rem 0; border-top: 1px dashed var(--rule); display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.5rem; }
.contrast li::before { content: "\00b7"; color: var(--ink-3); font-family: var(--font-mono); }
.contrast > div + div li::before { content: "+"; color: var(--felt); font-weight: 600; }
@media (max-width: 760px) {
  .contrast { grid-template-columns: 1fr; }
  .contrast > div + div { border-left: 0; border-top: 1px solid var(--rule-strong); }
}

/* The loop: plan, execute, review, verify, learn */
.loop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.loop-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.loop-steps li { padding: 1.1rem 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; }
.loop-steps li:last-child { border-bottom: 1px solid var(--rule); }
.loop-steps .n { font-family: var(--font-mono); font-size: 0.8rem; color: var(--felt); padding-top: 0.25rem; }
.loop-steps h3 { margin-bottom: 0.25rem; }
.loop-steps p { color: var(--ink-2); font-size: 1rem; }
@media (max-width: 900px) { .loop { grid-template-columns: 1fr; } }

/* Delegation dial */
.dial { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.dial-step { padding: 1.4rem 1.25rem 1.5rem 0; position: relative; }
.dial-step + .dial-step { padding-left: 1.25rem; border-left: 1px solid var(--rule); }
.dial-step::before {
  content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--ink);
}
.dial-step + .dial-step::before { left: -5px; }
.dial-step h3 { margin: 0.6rem 0 0.5rem; }
.dial-step p { font-size: 0.98rem; color: var(--ink-2); }
.dial-step .who { margin-top: 0.9rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-3); }
.dial-bar { height: 6px; margin-top: 2rem; background: linear-gradient(to right, var(--ink) 0%, var(--ink) 18%, var(--felt) 82%, var(--felt) 100%); border-radius: 0; }
.dial-legend { display: flex; justify-content: space-between; margin-top: 0.5rem; }
@media (max-width: 900px) {
  .dial { grid-template-columns: 1fr 1fr; }
  .dial-step:nth-child(3) { padding-left: 0; border-left: 0; }
  .dial-step:nth-child(3)::before { left: 0; }
  .dial-step:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 520px) {
  .dial { grid-template-columns: 1fr; }
  .dial-step, .dial-step + .dial-step { padding-left: 0; border-left: 0; }
  .dial-step + .dial-step { border-top: 1px solid var(--rule); }
  .dial-step::before, .dial-step + .dial-step::before { left: 0; }
}

/* Components: the five cards */
.hand { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.pcard {
  background: var(--card); border: 1px solid var(--rule-strong); border-radius: 6px;
  padding: 1.1rem 1.1rem 1.25rem; position: relative; min-height: 290px;
  display: flex; flex-direction: column;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.pcard:hover { transform: translateY(-3px); box-shadow: 0 10px 0 -6px var(--paper-3), 0 14px 28px -18px rgba(22, 25, 29, 0.35); }
.pcard-index { display: flex; justify-content: space-between; align-items: flex-start; }
.pcard-rank { font-family: var(--font-serif); font-size: 2rem; line-height: 1; color: var(--ink); }
.pcard-rank small { display: block; font-size: 0.95rem; color: var(--felt); margin-top: 0.15rem; }
.pcard-art { margin: 1rem 0 0.75rem; height: 70px; color: var(--ink); }
.pcard h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.55rem; }
.pcard .what { font-family: var(--font-mono); font-size: 0.78rem; color: var(--felt); letter-spacing: 0.02em; margin: 0.25rem 0 0.7rem; }
.pcard p { font-size: 0.96rem; color: var(--ink-2); }
.pcard .state { margin-top: auto; padding-top: 0.9rem; }
.pcard-deck { background: #fff; border-color: var(--ink); }
.pcard-deck .pcard-rank small { color: var(--felt); }
@media (max-width: 1100px) { .hand { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .hand { grid-template-columns: 1fr 1fr; } .pcard { min-height: 0; } }
@media (max-width: 480px) { .hand { grid-template-columns: 1fr; } }
.hand-note { margin-top: 1.5rem; max-width: var(--measure); color: var(--ink-2); }

/* Status chips (used sparingly, honest) */
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.02em;
  padding: 0.18rem 0.5rem; border-radius: 2px; border: 1px solid currentColor; white-space: nowrap;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-design { color: var(--ochre); }
.chip-build { color: var(--felt); }
.chip-pass { color: var(--felt); }
.chip-block { color: var(--vermilion); }

/* Example walkthrough (AUTH-03) */
.walk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.walk-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.walk-steps::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 1px; background: var(--rule-strong); }
.walk-steps li { position: relative; padding: 0 0 1.5rem 2.6rem; }
.walk-steps li::before {
  content: ""; position: absolute; left: 5px; top: 7px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--felt);
}
.walk-steps li.is-block::before { border-color: var(--vermilion); background: var(--vermilion-tint); }
.walk-steps h3 { font-size: 1.05rem; }
.walk-steps p { font-size: 0.98rem; color: var(--ink-2); margin-top: 0.25rem; }
@media (max-width: 900px) { .walk { grid-template-columns: 1fr; } }

/* Terminal (illustrative) */
.term {
  background: var(--night); color: var(--night-ink); border-radius: 6px; overflow: hidden;
  font-family: var(--font-mono); font-size: 0.84rem; line-height: 1.6;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 30px 60px -40px rgba(20, 24, 28, 0.6);
}
.term-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.9rem; background: var(--night-2); color: var(--night-ink-2); font-size: 0.76rem; }
.term-bar .dots { display: flex; gap: 6px; }
.term-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: #3a4147; display: block; }
.term-body { padding: 1rem 1.1rem 1.2rem; overflow-x: auto; }
.term-body pre { margin: 0; font: inherit; white-space: pre; }
.t-dim { color: var(--night-ink-2); }
.t-ok { color: var(--night-felt); }
.t-warn { color: #e2b45c; }
.t-bad { color: #f08a6d; }
.t-cmd { color: #fff; }
.illustration-note { margin-top: 0.75rem; font-size: 0.85rem; color: var(--ink-3); display: flex; gap: 0.5rem; align-items: baseline; }

/* Principles (numbered list in two columns) */
.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; }
.principles article { padding: 1.5rem 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; }
.principles .n { font-family: var(--font-serif); font-size: 1.6rem; color: var(--felt); line-height: 1; }
.principles h3 { margin-bottom: 0.35rem; }
.principles p { color: var(--ink-2); font-size: 1rem; }
@media (max-width: 760px) { .principles { grid-template-columns: 1fr; } }

/* Feature index (for capabilities): rows, not cards */
.index-list { border-top: 1px solid var(--ink); }
.index-row { display: grid; grid-template-columns: 4rem minmax(0, 1.1fr) minmax(0, 1.6fr); gap: 1.5rem; padding: 1.4rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.index-row .n { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-3); }
.index-row h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.4rem; line-height: 1.2; }
.index-row p { color: var(--ink-2); font-size: 1rem; }
.index-row .state { justify-self: end; }
@media (max-width: 900px) {
  .index-row { grid-template-columns: 3rem 1fr; gap: 0.5rem 1rem; }
  .index-row p, .index-row .state { grid-column: 2; justify-self: start; }
}
.group-title { margin: 3rem 0 0.75rem; display: flex; align-items: baseline; gap: 0.75rem; }
.group-title:first-child { margin-top: 0; }

/* Stage diagram wrapper */
.figure-frame { background: var(--card); border: 1px solid var(--rule-strong); padding: clamp(1rem, 2.5vw, 1.75rem); }
.figure-frame + figcaption, figure figcaption { margin-top: 0.75rem; }
figure { margin: 0; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Stage list (lifecycle) */
.stages { counter-reset: s; border-top: 1px solid var(--ink); }
.stage { display: grid; grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1.3fr); gap: 1.5rem; padding: 1.75rem 0; border-bottom: 1px solid var(--rule); }
.stage .n { font-family: var(--font-serif); font-size: 2.2rem; line-height: 1; color: var(--felt); }
.stage h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.55rem; }
.stage .gate { margin-top: 0.6rem; }
.stage p { color: var(--ink-2); }
@media (max-width: 760px) { .stage { grid-template-columns: 3rem 1fr; } .stage > p, .stage > div:last-child { grid-column: 2; } }

/* Callout */
.callout { border-left: 3px solid var(--vermilion); background: var(--card); padding: 1.1rem 1.25rem; max-width: var(--measure); }
.callout.is-felt { border-left-color: var(--felt); }
.callout p { color: var(--ink-2); }

/* Ecosystem table */
.ledger { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.ledger caption { text-align: left; padding-bottom: 0.75rem; }
.ledger th, .ledger td { text-align: left; vertical-align: top; padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--rule); }
.ledger thead th { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--ink); }
.ledger td.name { font-family: var(--font-serif); font-size: 1.3rem; white-space: nowrap; }
.ledger td.host a { font-family: var(--font-mono); font-size: 0.88rem; }
.ledger .rank { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-3); }
@media (max-width: 760px) {
  .ledger thead { display: none; }
  .ledger, .ledger tbody, .ledger tr, .ledger td { display: block; width: 100%; }
  .ledger tr { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
  .ledger td { border: 0; padding: 0.15rem 0; }
}

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.mail-card { background: #fff; border: 1px solid var(--ink); padding: clamp(1.5rem, 3vw, 2.25rem); }
.mail-addr { font-family: var(--font-serif); font-size: clamp(1.6rem, 3.4vw, 2.4rem); color: var(--ink); text-decoration: none; display: inline-block; margin: 0.75rem 0 1.25rem; word-break: break-word; }
.mail-addr:hover { color: var(--felt); text-decoration: underline; }
.copy-status { font-family: var(--font-mono); font-size: 0.8rem; color: var(--felt); min-height: 1.2em; margin-top: 0.6rem; }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { padding: 0.9rem 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.6rem; }
.checklist li::before { content: "□"; color: var(--felt); font-family: var(--font-mono); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* Closing band (night) */
.band { background: var(--night); color: var(--night-ink); padding: clamp(3.5rem, 8vw, 6rem) 0; position: relative; overflow: hidden; }
.band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(to right, rgba(233, 228, 216, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(233, 228, 216, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}
.band .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2.5rem; align-items: end; }
.band h2 { color: #fff; font-size: clamp(2rem, 4vw, 3.2rem); max-width: 18ch; }
.band p { color: var(--night-ink-2); font-size: 1.1rem; max-width: 52ch; margin-top: 1.1rem; }
.band .label { color: var(--night-ink-2); }
.band .label .mark { color: var(--night-felt); }
.band .btn-primary { background: var(--night-ink); color: var(--night); border-color: var(--night-ink); }
.band .btn-primary:hover { background: #fff; color: var(--night); }
.band .btn-ghost { color: var(--night-ink); border-color: rgba(233,228,216,0.5); }
.band .btn-ghost:hover { background: var(--night-2); color: #fff; }
.band a:not(.btn) { color: var(--night-felt); }
@media (max-width: 760px) { .band .wrap { grid-template-columns: 1fr; } }

/* Page intro for interior pages */
.page-intro { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 3.5rem); border-bottom: 1px solid var(--rule); }
.page-intro .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: end; }
.page-intro h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin: 1rem 0 1.2rem; max-width: 18ch; }
.page-intro p { font-size: 1.15rem; color: var(--ink-2); max-width: 56ch; }
.page-intro .aside { font-size: 0.95rem; color: var(--ink-3); border-left: 1px solid var(--rule-strong); padding-left: 1.25rem; }
@media (max-width: 860px) { .page-intro .wrap { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--ink); padding: 3rem 0 2.5rem; background: var(--paper-2); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); gap: 2rem; }
.footer-grid h2 { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.9rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin: 0.35rem 0; }
.footer-grid a { color: var(--ink-2); text-decoration: none; font-size: 0.95rem; }
.footer-grid a:hover { color: var(--felt); text-decoration: underline; }
.footer-blurb { color: var(--ink-2); font-size: 0.95rem; max-width: 36ch; margin-top: 0.9rem; }
.footer-base { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; color: var(--ink-3); font-size: 0.85rem; }
@media (max-width: 1100px) and (min-width: 861px) { .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .footer-grid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > div:first-child { grid-column: 1 / -1; } }

/* ---------- Diagram motion (SVG classes) ---------- */
.flow-dash { stroke-dasharray: 4 6; animation: flow 1.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -20; } }
.pulse { animation: pulse 2.4s var(--ease) infinite; transform-origin: center; transform-box: fill-box; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}
@media print {
  .site-header, .band, .site-footer, .nav-toggle { display: none; }
  body::before { display: none; }
}

/* Lifecycle state-machine detail (reused markup), folded by default (review 04) */
.sm-detail { margin-top: 3rem; }
.sm-detail > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-sans); font-weight: 500; color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 0.7rem 1rem;
}
.sm-detail > summary::-webkit-details-marker { display: none; }
.sm-detail > summary::before { content: "+"; font-family: var(--font-mono); color: var(--felt); }
.sm-detail[open] > summary::before { content: "\2212"; }
.sm-detail > summary:hover { background: var(--paper-2); }
.sm-detail > summary:focus-visible { outline: 2px solid var(--felt); outline-offset: 3px; }
.sm-detail[open] > summary { margin-bottom: 1.5rem; }
@media print { .sm-detail > * { display: block; } }

/* On-this-page list for long pages */
.page-toc ol { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.page-toc li { margin: 0.35rem 0; }
.page-toc a { color: var(--ink-2); }
.page-toc a:hover { color: var(--felt); }
.footer-grid a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.sm-detail .section-desc { max-width: var(--measure); color: var(--ink-2); }
.lifecycle-entities-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.entity-card { background: var(--card); border: 1px solid var(--rule-strong); padding: 1.4rem; }
.entity-card-header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--rule); padding-bottom: 0.75rem; margin-bottom: 0.9rem; }
.entity-title { font-family: var(--font-serif); font-weight: 400; font-size: 1.5rem; }
.entity-type-badge { font-family: var(--font-mono); font-size: 0.74rem; color: var(--felt); text-transform: uppercase; letter-spacing: 0.08em; }
.entity-meta-block { margin: 0.8rem 0; font-size: 0.96rem; color: var(--ink-2); }
.entity-meta-label { display: block; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.3rem; }
.entity-states-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin: 0.8rem 0; }
.state-pill { font-family: var(--font-mono); font-size: 0.78rem; padding: 0.12rem 0.45rem; border: 1px solid var(--rule-strong); background: #fff; border-radius: 2px; }
.state-arrow { color: var(--ink-3); font-size: 0.85rem; }
.universal-exit-strip { grid-column: 1 / -1; border-left: 3px solid var(--vermilion); background: var(--card); padding: 1.1rem 1.25rem; color: var(--ink-2); }
.universal-exit-strip p { font-size: 0.96rem; }
.sm-detail code, .prose code { font-family: var(--font-mono); font-size: 0.86em; background: var(--paper-2); padding: 0.05em 0.3em; border-radius: 2px; }
@media (max-width: 860px) { .lifecycle-entities-grid { grid-template-columns: 1fr; } }

/* Grid children must be allowed to shrink below their content width */
.walk > *, .loop > *, .hero-grid > *, .contact-grid > *, .band .wrap > * { min-width: 0; }
.term { max-width: 100%; }

/* Ecosystem: featured public site and site cards */
.site-feature { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--ink); padding: clamp(1.25rem, 3vw, 2rem); transition: box-shadow 200ms var(--ease), transform 200ms var(--ease); }
.site-feature:hover { color: inherit; transform: translateY(-2px); box-shadow: 0 10px 0 -6px var(--paper-3), 0 18px 32px -22px rgba(22, 25, 29, 0.4); }
.site-feature-card { aspect-ratio: 5 / 7; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--card); position: relative; display: grid; place-items: center; }
.site-feature-card .rank { position: absolute; top: 0.6rem; left: 0.75rem; font-family: var(--font-serif); font-size: 1.6rem; }
.site-feature-card .suit { font-size: 4.5rem; color: var(--felt); line-height: 1; }
.site-feature-body h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, 4vw, 2.8rem); margin: 0.5rem 0 0.75rem; }
.site-feature-body p { color: var(--ink-2); max-width: 60ch; }
.site-feature-body .label { color: var(--ink-3); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.site-go { display: inline-flex; gap: 0.5rem; margin-top: 1.25rem; font-weight: 500; color: var(--felt); }
.site-feature:hover .site-go .arrow { transform: translateX(3px); }
.site-go .arrow { transition: transform 160ms var(--ease); }
@media (max-width: 640px) { .site-feature { grid-template-columns: 1fr; } .site-feature-card { max-width: 120px; } }

.sites { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.site-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--card); border: 1px solid var(--rule-strong); border-radius: 6px; padding: 1.1rem 1.1rem 1.25rem; transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease); }
.site-card:hover { color: inherit; border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 10px 0 -6px var(--paper-3), 0 14px 28px -18px rgba(22, 25, 29, 0.35); }
.site-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; margin-bottom: 1rem; }
.site-rank { font-family: var(--font-serif); font-size: 1.6rem; line-height: 1; }
.site-rank small { display: block; font-size: 0.9rem; color: var(--felt); }
.site-card h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.5rem; }
.site-host { font-family: var(--font-mono); font-size: 0.8rem; color: var(--felt); margin: 0.2rem 0 0.7rem; }
.site-card p:last-child { font-size: 0.95rem; color: var(--ink-2); }
@media (max-width: 1000px) { .sites { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sites { grid-template-columns: 1fr; } }

/* Fair questions: native disclosure, corner index as a quiet card cue */
.faq { border-top: 1px solid var(--ink); max-width: 62rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) 1.5rem; gap: 1rem; align-items: center; padding: 1.15rem 0; font-family: var(--font-serif); font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); font-size: 1.1rem; color: var(--felt); justify-self: end; }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--felt-deep); }
.faq summary:focus-visible { outline: 2px solid var(--felt); outline-offset: 4px; }
.faq-index { font-family: var(--font-serif); font-size: 1.1rem; line-height: 1; border: 1px solid var(--rule-strong); border-radius: 4px; background: var(--card); width: 2.25rem; aspect-ratio: 5 / 7; display: grid; place-content: center; text-align: center; }
.faq-index small { display: block; font-size: 0.75rem; color: var(--felt); }
.faq-body { padding: 0 0 1.4rem 3.75rem; max-width: calc(var(--measure) + 3.75rem); }
.faq-body p, .faq-body li { color: var(--ink-2); }
.faq-body ul { margin: 0.6rem 0 0; padding-left: 1.1rem; }
.faq-body li + li { margin-top: 0.45rem; }
@media (max-width: 520px) { .faq summary { grid-template-columns: 2.25rem minmax(0, 1fr) 1.25rem; gap: 0.75rem; } .faq-body { padding-left: 0; } }
.next-steps { max-width: 62rem; }

/* The hard parts: concern on the left, response on the right */
.hurdles { border-top: 1px solid var(--ink); }
.hurdle { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(1.5rem, 4vw, 3.5rem); padding: clamp(1.5rem, 3vw, 2.25rem) 0; border-bottom: 1px solid var(--rule); }
.hurdle-q h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.2; margin: 0.5rem 0 0.75rem; }
.hurdle-q p:last-child { color: var(--ink-2); }
.hurdle-a { background: var(--card); border: 1px solid var(--rule-strong); border-radius: 6px; padding: clamp(1.1rem, 2.5vw, 1.6rem); }
.hurdle-a ul { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.hurdle-a li { padding: 0.6rem 0; border-top: 1px dashed var(--rule); color: var(--ink-2); }
.hurdle-a li:first-child { border-top: 0; padding-top: 0.2rem; }
.hurdle-a strong { color: var(--ink); font-weight: 600; }
.hurdle-note { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); font-family: var(--font-serif); font-style: italic; color: var(--ink-2); }
@media (max-width: 860px) { .hurdle { grid-template-columns: 1fr; gap: 1rem; } }

/* When you come back: the hand laid face up (review 05, webmktrev-05).
   Four cards in a slight fan on wide screens, flat rows on small ones.
   The fan is decoration only; reading order and content never depend on it. */
.return-hand { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.rcard {
  background: var(--card); border: 1px solid var(--rule-strong); border-radius: 8px;
  padding: 1.1rem 1.15rem 1.3rem; aspect-ratio: 5 / 6; display: flex; flex-direction: column;
  box-shadow: 0 1px 0 var(--paper-3), 0 12px 24px -20px rgba(22, 25, 29, 0.35);
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.rcard-index { font-family: var(--font-serif); font-size: 1.7rem; line-height: 1; color: var(--felt); margin-bottom: 1.1rem; }
.rcard-index small { display: block; font-size: 0.95rem; margin-top: 0.15rem; }
.rcard-red { color: var(--vermilion); }
.rcard h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.45rem; margin-bottom: 0.5rem; }
.rcard p { font-size: 0.97rem; color: var(--ink-2); }
.rcard-open { border-color: var(--ink); background: #fff; }
.return-note { margin-top: 1.75rem; max-width: var(--measure); font-family: var(--font-serif); font-style: italic; font-size: 1.2rem; color: var(--ink-2); }
@media (min-width: 1101px) {
  .rcard:nth-child(1) { transform: rotate(-2.2deg) translateY(10px); }
  .rcard:nth-child(2) { transform: rotate(-0.7deg) translateY(2px); }
  .rcard:nth-child(3) { transform: rotate(0.7deg) translateY(2px); }
  .rcard:nth-child(4) { transform: rotate(2.2deg) translateY(10px); }
  .return-hand:hover .rcard, .return-hand:focus-within .rcard { transform: none; }
}
@media (max-width: 1100px) { .return-hand { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rcard { aspect-ratio: auto; } }
@media (max-width: 520px) { .return-hand { grid-template-columns: 1fr; } }
/* ---------- Review 06: one brand system across every surface ----------
   Card vocabulary, used selectively:
   - Proportion: 5:7 for anything drawn as a card (index, mark, emblem).
   - Corner index: rank over suit, serif rank, small suit, top left only.
   - Suits are decoration, always aria-hidden; text carries the meaning.
   - Line: 1px rule, 1.5px ink edge for a card face, never drop-shadow glow.
   - Color: ink and paper first; felt green for action and progress;
     vermilion only for "needs attention"; ochre is retired from marketing.
   - Motion: one deliberate reveal per view, none with reduced motion. */
:root { --card-ratio: 5 / 7; --card-edge: 1.5px solid var(--ink); --card-radius: 6px; }

/* Offer steps in the closing band: three small card faces */
.offer { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.7rem; max-width: 52ch; }
.offer li { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); gap: 0.85rem; align-items: start; color: var(--night-ink); font-size: 1rem; line-height: 1.45; }
.offer-n {
  aspect-ratio: var(--card-ratio); width: 1.9rem; display: grid; place-content: center;
  border: 1px solid rgba(233, 228, 216, 0.55); border-radius: 3px;
  font-family: var(--font-serif); font-size: 1rem; color: var(--night-felt);
}

/* Contact: the three answers as a numbered brief */
ol.checklist { counter-reset: brief; }
ol.checklist li { counter-increment: brief; grid-template-columns: 1.9rem 1fr; gap: 0.85rem; align-items: start; }
ol.checklist li::before {
  content: counter(brief); aspect-ratio: var(--card-ratio); width: 1.6rem; display: grid; place-content: center;
  border: 1px solid var(--rule-strong); border-radius: 3px; background: var(--card);
  font-family: var(--font-serif); font-size: 0.95rem; color: var(--felt);
}
ol.checklist strong { color: var(--ink); font-weight: 600; }
ol.checklist li > span { color: var(--ink-2); }
.mail-hint { margin-top: 0.4rem; font-size: 0.92rem; color: var(--ink-3); }
/* Lifecycle chart: tall SVG; keep text legible on phones by scrolling instead of shrinking */
.lifecycle-chart img { display: block; width: 100%; height: auto; min-width: 900px; }

/* Lifecycle page: one chart per artifact */
.chart-key { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1.5rem; color: var(--ink-2); text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: 0.95rem; }
.key-red { display: inline-block; width: 2rem; height: 2px; background: var(--vermilion); }
.key-you { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--felt); color: #fff; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; }
.chart-block { margin: 0 0 2.75rem; }
.chart-all { margin-top: -1rem; }

/* Dealer: not a card; it carries the dealer button (a plain disc, not a casino chip) */
.dealer-button { display: inline-grid; place-content: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  border: 1.5px solid var(--ink); box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 4px var(--felt);
  background: var(--card); font-family: var(--font-serif); font-weight: 600; font-size: 1rem; line-height: 1; color: var(--ink); }
.site-rank .dealer-button { width: 1.8rem; height: 1.8rem; font-size: 0.9rem; }

/* Jack screens (interfaces/jack): a rail of screens beside a terminal window. */
.shot-more { color: var(--ink-3); font-size: 0.9rem; }
.jack { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: clamp(1.25rem, 2.5vw, 2.25rem); align-items: start; }
.jack-rail { position: sticky; top: 5.5rem; display: grid; gap: 1.15rem; }
.jack-group-name { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 0.35rem; margin-bottom: 0.2rem; border-bottom: 1px solid var(--rule); }
.jack-screen { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 0.5rem; background: none; border: 0; padding: 0.32rem 0 0.32rem 0.7rem; margin-left: -0.7rem; font: inherit; font-size: 0.95rem; color: var(--ink-2); text-align: left; cursor: pointer; border-radius: 2px; box-shadow: inset 2px 0 0 transparent; transition: color 140ms var(--ease), box-shadow 140ms var(--ease); }
.jack-screen:hover { color: var(--ink); }
.jack-screen[aria-current="page"] { color: var(--ink); font-weight: 500; box-shadow: inset 2px 0 0 var(--felt); }
.jack-screen:focus-visible { outline: 2px solid var(--felt); outline-offset: 2px; }
.jack-count { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-3); font-weight: 400; }
.jack-stage { min-width: 0; }
@media (min-width: 1360px) { .jack { margin-inline: -4rem; } }
.jack-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1rem; }
.jack-what h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.15; }
.jack-what p { color: var(--ink-2); margin-top: 0.3rem; max-width: 52ch; }
.jack-themes { display: grid; justify-items: end; gap: 0.45rem; }
.jack-theme-name { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.jack-swatches { display: grid; grid-template-columns: repeat(6, auto); gap: 0.4rem; justify-content: end; }
.jack-swatch { position: relative; width: 1.6rem; height: 1.15rem; padding: 0; border-radius: 3px; cursor: pointer; overflow: hidden; background: var(--sw-bg); border: 1px solid rgba(22, 25, 29, 0.22); transition: transform 140ms var(--ease); }
.jack-swatch-bar { position: absolute; left: 0; right: 0; top: 0; height: 32%; background: var(--sw-bar); }
.jack-swatch-bar::before { content: ""; position: absolute; left: 22%; top: 0; bottom: 0; width: 30%; background: var(--sw-accent); }
.jack-swatch-line { position: absolute; left: 18%; right: 30%; top: 58%; height: 1.5px; background: var(--sw-ink); opacity: 0.55; }
.jack-swatch:hover { transform: translateY(-1px); }
.jack-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
.jack-swatch:focus-visible { outline: 2px solid var(--felt); outline-offset: 4px; }
.jack-window { --win-bg: var(--paper); --win-bar: var(--paper-2); --win-ink: var(--ink-3); --win-rule: var(--rule-strong);
  margin: 0; border-radius: 9px; overflow: hidden; background: var(--win-bg); border: 1px solid var(--win-rule);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 28px 60px -34px rgba(22, 25, 29, 0.55), 0 2px 6px -2px rgba(22, 25, 29, 0.12);
  transition: background 220ms var(--ease), border-color 220ms var(--ease); }
.jack-window.is-dark { box-shadow: 0 28px 60px -30px rgba(10, 12, 14, 0.75), 0 2px 6px -2px rgba(10, 12, 14, 0.3); }
.jack-chrome { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 0.55rem 0.85rem; background: var(--win-bar); color: var(--win-ink); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.02em; border-bottom: 1px solid var(--win-rule); transition: background 220ms var(--ease), color 220ms var(--ease); }
.jack-dots { display: flex; gap: 6px; }
.jack-dots i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: 0.32; display: block; }
.jack-path { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jack-size { opacity: 0.75; }
.jack-shot { display: block; line-height: 0; cursor: zoom-in; }
.jack-shot img { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 936; transition: opacity 160ms var(--ease); }
/* Queen: the image is the whole desktop window, so the page frame is only a soft shadow and a hairline */
.jack-queen .jack-window { border-radius: 10px; }
.jack-queen .jack-chrome { display: none; }
.jack-queen .jack-shot img { aspect-ratio: 1440 / 900; background: var(--paper); }
.jack.is-loading .jack-shot img { opacity: 0.9; }
.jack-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 0.9rem; min-height: 2.1rem; }
.jack-pages { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; }
.jack-page { display: inline-flex; gap: 0.45rem; align-items: baseline; background: none; border: 0; padding: 0.3rem 0; font: inherit; font-size: 0.92rem; color: var(--ink-3); cursor: pointer; box-shadow: inset 0 -1px 0 transparent; transition: color 140ms var(--ease), box-shadow 140ms var(--ease); }
.jack-page-n { font-family: var(--font-mono); font-size: 0.72rem; }
.jack-page:hover { color: var(--ink); }
.jack-page[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--felt); }
.jack-page:focus-visible { outline: 2px solid var(--felt); outline-offset: 2px; }
.jack-step { display: flex; gap: 0.35rem; flex: none; }
.jack-arrow { width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--rule-strong); background: var(--card); color: var(--ink); font-size: 0.95rem; cursor: pointer; transition: border-color 140ms var(--ease), background 140ms var(--ease); }
.jack-arrow:hover:not(:disabled) { border-color: var(--ink); }
.jack-arrow:disabled { opacity: 0.35; cursor: default; }
.jack-arrow:focus-visible { outline: 2px solid var(--felt); outline-offset: 2px; }
.jack-note { margin-top: 1.1rem; flex-wrap: wrap; }
.jack-note a { color: var(--felt); }
.jack-rail:empty { display: none; }
@media (max-width: 900px) {
  .jack { grid-template-columns: 1fr; }
  .jack-rail { position: static; display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.4rem; scrollbar-width: thin; }
  .jack-group { display: contents; }
  .jack-group-name { display: none; }
  .jack-screen { flex: none; width: auto; margin: 0; padding: 0.35rem 0.75rem; border: 1px solid var(--rule-strong); border-radius: 999px; font-size: 0.88rem; box-shadow: none; }
  .jack-screen[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: none; }
  .jack-screen[aria-current="page"] .jack-count { color: var(--paper-3); }
  .jack-themes { justify-items: start; }
  .jack-swatches { justify-content: start; grid-template-columns: repeat(12, auto); }
}
@media (max-width: 560px) {
  .jack-size { display: none; } .jack-chrome { grid-template-columns: auto 1fr; }
  .jack-swatches { grid-template-columns: repeat(6, auto); }
  .jack-pages { display: none; }
  .jack-foot { justify-content: flex-end; }
  .jack-foot::before { content: attr(data-page); font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-3); margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) { .jack-window, .jack-chrome, .jack-shot img, .jack-swatch { transition: none; } }

/* Sign in / Sign out (Google, shared session across the AceLM sites) */
.header-auth { margin-left: 0.6rem; padding: 0.45rem 0.8rem; font-size: 0.92rem; color: var(--ink-2); text-decoration: none; border-radius: var(--radius); white-space: nowrap; }
.header-auth:hover { color: var(--ink); background: var(--paper-2); }
.header-auth:focus-visible { outline: 2px solid var(--felt); outline-offset: 2px; }
.header-auth[data-state="in"]::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--felt); margin-right: 0.4rem; vertical-align: 0.1em; }
@media (max-width: 1180px) { .header-auth { margin-left: 0.4rem; } }
@media (max-width: 520px) { .header-auth { padding: 0.4rem 0.5rem; font-size: 0.85rem; } }

/* Below the full nav, Sign in moves into the Menu so the header keeps its mark, early access, and Menu */
@media (max-width: 1040px) {
  .header-auth { display: none; }
  .site-nav .nav-auth { display: block; }
}
@media (min-width: 1041px) { .site-nav .nav-auth { display: none; } }

/* "More" menu: a dropdown on wide screens, plain inline links in the mobile menu. */
.nav-more { position: relative; }
.nav-more-toggle {
  background: none; border: 0; font: inherit; font-size: 0.92rem; color: var(--ink-2); cursor: pointer;
  padding: 0.4rem 0.55rem; border-radius: 2px; white-space: nowrap;
}
.nav-more-toggle span { font-size: 0.7em; margin-left: 0.15rem; }
.nav-more-toggle:hover, .nav-more.open .nav-more-toggle { color: var(--ink); background: var(--paper-2); }
.nav-more.is-current .nav-more-toggle { color: var(--ink); box-shadow: inset 0 -2px 0 var(--felt); }
.nav-more-toggle:focus-visible { outline: 2px solid var(--felt); outline-offset: 2px; }
.nav-menu-interfaces .nav-more-menu { right: auto; left: 0; }
.nav-more-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 6px); min-width: 11rem; z-index: 30;
  flex-direction: column; background: var(--paper); border: 1px solid var(--rule-strong);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); padding: 0.35rem;
}
.nav-more.open .nav-more-menu { display: flex; }
.site-nav .nav-more-menu a { padding: 0.5rem 0.7rem; }
.site-nav .nav-more-menu a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--felt); }
@media (max-width: 1040px) {
  .nav-more-toggle { display: none; }
  .nav-more-menu { display: flex; position: static; min-width: 0; border: 0; box-shadow: none; padding: 0; background: none; }
  .site-nav .nav-more-menu a { padding: 0.8rem 0; }
  .site-nav .nav-more-menu a[aria-current="page"] { padding-left: 0.75rem; }
}

/* Interfaces pages */
.mockup-note { font-size: 0.95rem; color: var(--ink-2); }
.mockup-note strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 0.3rem; }
.ifc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .ifc-cards { grid-template-columns: 1fr; } }
.king-launch { display: flex; gap: 1rem 1.5rem; align-items: center; flex-wrap: wrap; }
.king-launch .muted { color: var(--ink-3); font-size: 0.95rem; }

/* Card suits: the owner's shapes (public/imgs/suits/), inline SVG in the text colour. */
.suit-icon { display: inline-block; width: 0.62em; height: 0.62em; vertical-align: -0.02em; fill: currentColor; }
.site-rank small .suit-icon, .faq-index small .suit-icon, .rcard-index small .suit-icon { display: block; margin: 0.12em auto 0; }
.site-rank small .suit-icon { margin-left: 0; }

/* Card motif: real card images (public/imgs/cards/green/, suits in felt green) in place of bare suits.
   Section labels show the tiny Ace of their suit; numbered items show that rank as a small card;
   Dealer shows the dealer icon. Images are decorative where the text beside them says the same. */
.card-mark, .card-index, .card-feature, .card-dealer { display: block; height: auto; max-width: none; }
.label .mark { display: inline-block; vertical-align: middle; margin-right: 0.35em; }
.card-mark { width: 1.45em; filter: drop-shadow(0 1px 0 rgba(22, 25, 29, 0.12)); }
.label .mark .card-mark { width: 16px; }
.card-index { width: 2.25rem; border-radius: 3px; box-shadow: 0 1px 0 var(--paper-3), 0 6px 12px -10px rgba(22, 25, 29, 0.45); }
.card-dealer { width: 2.25rem; }
.principles .n .card-index, .stage .n .card-index { width: 2.4rem; }
.stage .n .card-index { width: 2.8rem; }
.loop-steps .n .card-index, .index-row .n .card-index { width: 1.9rem; }
.index-row { align-items: start; }
.rcard-index .card-index { width: 2.6rem; }
.faq-index { border: 0; background: none; width: 2.25rem; aspect-ratio: auto; }
.faq-index .card-index { width: 2rem; }
.pcard-rank .card-index { width: 2.6rem; }
.pcard-rank .card-dealer { width: 2.6rem; }
.site-rank .card-index, .site-rank .card-dealer { width: 2.2rem; }
.site-feature-card { aspect-ratio: auto; border: 0; background: none; display: block; }
.card-feature { width: 100%; max-width: 180px; filter: drop-shadow(0 10px 14px rgba(22, 25, 29, 0.18)); }
.band .label .mark .card-mark { filter: none; }
@media print { .card-mark, .card-index { box-shadow: none; filter: none; } }

/* Section labels ("The problem", "The roles", "The concern", ...): set as real small caps in the
   serif (Source Serif carries an smcp feature), much larger than the mono margin notes they were. */
.label.kicker {
  font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.3rem, 2vw, 1.55rem);
  text-transform: none; font-variant-caps: small-caps; font-feature-settings: "smcp" 1;
  letter-spacing: 0.035em; line-height: 1.2; color: var(--felt-deep);
}
.label-red.kicker { color: var(--vermilion); }
.band .label.kicker { color: var(--night-ink-2); }
.label.kicker .mark .card-mark { width: 1.05em; }
.group-title.kicker { margin-top: 3.25rem; }
/* Headings step up slightly so they still lead the larger labels. */
.section-head h2 { font-size: clamp(2.25rem, 4vw, 3.4rem); }
.page-intro h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); }
.hurdle-q h3 { font-size: clamp(1.65rem, 2.6vw, 2.1rem); }
/* Wider label column on wide screens only: on phones the head stacks (one column), as above. */
@media (min-width: 761px) { .section-head { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); } }

/* Interfaces: the page switcher sits right above the screenshot, as a row of playing cards
   (A, 2, 3, ... in the interface's suit), so it is clear the screen can be flipped through. */
.jack-pager { margin: 0 0 0.9rem; padding: 0.75rem 0.9rem; background: var(--card); border: 1px solid var(--rule-strong); border-radius: 8px; flex-wrap: wrap; align-items: center; }
.jack-pager-hint { flex: 1 0 100%; margin: 0 0 0.4rem; font-family: var(--font-serif); font-variant-caps: small-caps; font-feature-settings: "smcp" 1; letter-spacing: 0.03em; font-size: 1.05rem; color: var(--felt-deep); }
.jack-pager.is-single { background: none; border-color: transparent; padding: 0; min-height: 0; }
.jack-pager.is-single .jack-step { display: none; }
.jack-pager.is-single .jack-pager-hint { font-size: 0.95rem; color: var(--ink-3); margin: 0; }
.jack-pager .jack-pages { gap: 0.5rem 0.9rem; flex: 1 1 auto; }
.jack-pager .jack-page { align-items: center; gap: 0.55rem; padding: 0.25rem 0.5rem 0.25rem 0.25rem; border-radius: 6px; box-shadow: none; }
.jack-page-card { width: 1.75rem; height: auto; border-radius: 2px; transition: transform 160ms var(--ease), box-shadow 160ms var(--ease); box-shadow: 0 4px 8px -6px rgba(22, 25, 29, 0.5); }
.jack-page-text { display: grid; text-align: left; line-height: 1.2; }
.jack-pager .jack-page-n { font-size: 0.68rem; color: var(--ink-3); }
.jack-pager .jack-page:hover .jack-page-card { transform: translateY(-2px); }
.jack-pager .jack-page[aria-selected="true"] { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--felt); }
.jack-pager .jack-page[aria-selected="true"] .jack-page-card { transform: translateY(-3px); box-shadow: 0 8px 12px -8px rgba(22, 25, 29, 0.6); }
@media (max-width: 560px) {
  .jack-pager .jack-pages { display: flex; }
  .jack-pager .jack-page-text { display: none; }
  .jack-pager::before { content: none; }
}
@media (prefers-reduced-motion: reduce) { .jack-page-card { transition: none; } }

/* Worked example: small views of Jack, Queen, and King on the same review, each a link to its mockup. */
.peek { margin: 0; }
.peek-lead { font-size: 0.98rem; color: var(--ink-2); margin: 0 0 0.9rem; }
.peek-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.peek-list li:first-child { grid-column: 1 / -1; }
.peek-item { display: block; text-decoration: none; color: inherit; background: var(--card); border: 1px solid var(--rule-strong); border-radius: 8px; overflow: hidden;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease); }
.peek-item:hover { color: inherit; border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 10px 0 -6px var(--paper-3), 0 14px 28px -18px rgba(22, 25, 29, 0.35); }
.peek-item:focus-visible { outline: 2px solid var(--felt); outline-offset: 3px; }
.peek-item > img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--rule); }
.peek-cap { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.75rem; font-size: 0.92rem; color: var(--ink-2); }
.peek-cap strong { font-family: var(--font-serif); font-weight: 400; font-size: 1.15rem; color: var(--ink); margin-right: 0.3rem; }
.peek-cap .card-index { width: 1.5rem; flex: none; }
.peek-cap .arrow { margin-left: auto; color: var(--felt); transition: transform 160ms var(--ease); }
.peek-item:hover .peek-cap .arrow { transform: translateX(3px); }
@media (max-width: 520px) { .peek-list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .peek-item, .peek-cap .arrow { transition: none; } }

/* Dev site only: the commit the release was built from (filled in by site.js from /build.json). */
.dev-build { flex: 1 0 100%; font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-3); overflow-wrap: anywhere; }

/* Contact us: the message form */
.contact-form { display: grid; gap: 1rem; }
.contact-form label { display: grid; gap: 0.35rem; font-weight: 500; font-size: 0.95rem; color: var(--ink); }
.contact-form .opt { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.contact-form input, .contact-form select, .contact-form textarea { font: inherit; font-weight: 400; padding: 0.6rem 0.75rem; border: 1px solid var(--rule-strong); border-radius: 6px; background: #fff; color: var(--ink); width: 100%; }
.contact-form textarea { resize: vertical; }
.contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid var(--felt); outline-offset: 1px; }
.contact-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.3em; margin: 0; font-size: 0.95rem; }
.form-status.is-ok { color: var(--felt); }
.form-status.is-bad { color: var(--vermilion); }

/* Contact us: fields, live messages, errors, and the thank-you panel */
.contact-form .field { display: grid; gap: 0.35rem; }
.contact-form .field > label { display: block; font-weight: 500; font-size: 0.95rem; color: var(--ink); }
.contact-form .field-msg { margin: 0; min-height: 1.2em; font-size: 0.85rem; color: var(--ink-3); }
.contact-form .field-msg.is-ok { color: var(--felt); }
.contact-form .field-msg.is-bad { color: #c8102e; font-weight: 500; }
/* Needs attention: a bright red border that cannot be missed (and a red ring when focused). */
.contact-form .field.has-error input, .contact-form .field.has-error textarea, .contact-form .field.has-error select {
  border: 2px solid #e0102f; background: #fff7f7; }
.contact-form .field.has-error input:focus-visible, .contact-form .field.has-error textarea:focus-visible { outline: 3px solid rgba(224, 16, 47, 0.35); outline-offset: 1px; }
.contact-form .field-captcha.has-error .cf-turnstile { outline: 2px solid #e0102f; outline-offset: 4px; border-radius: 4px; }
.contact-thanks { padding: 0.5rem 0; }
.contact-thanks h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 0 0 0.75rem; }
.contact-thanks p { color: var(--ink-2); }
.contact-thanks:focus { outline: none; }
/* The hidden attribute must win over display rules such as .contact-form { display: grid }. */
[hidden] { display: none !important; }

/* Small changes: one chat message, done (home page). The chat is an illustration; the list says it in words. */
.quick-demo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.quick-chat { background: var(--night); color: var(--night-ink); border-radius: 8px; padding: 1.1rem 1.2rem; font-size: 0.98rem; box-shadow: 0 14px 28px -20px rgba(22, 25, 29, 0.6); }
.quick-chat p { margin: 0; }
.quick-chat span:first-child { display: block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--night-ink-2); margin-bottom: 0.25rem; }
.quick-you { padding: 0.6rem 0.8rem; background: rgba(255, 255, 255, 0.06); border-radius: 6px; }
.quick-trace { list-style: none; margin: 0.8rem 0; padding: 0 0 0 0.8rem; border-left: 2px solid var(--night-felt); font-family: var(--font-mono); font-size: 0.8rem; color: var(--night-ink-2); display: grid; gap: 0.3rem; }
.quick-trace li::before { content: "\2713  "; color: var(--night-felt); }
.quick-trace code, .quick-acelm code { font-size: 0.85em; background: rgba(255, 255, 255, 0.08); padding: 0.05em 0.35em; border-radius: 3px; color: inherit; }
.quick-acelm { padding: 0.6rem 0.8rem; border: 1px solid var(--night-felt); border-radius: 6px; }
.quick-acelm strong { color: var(--night-felt); }
.quick-undo { margin-left: 0.4rem; font-family: var(--font-mono); font-size: 0.75rem; text-decoration: underline; color: var(--night-ink-2); }
.quick-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.quick-points li { color: var(--ink-2); padding-left: 1.1rem; border-left: 2px solid var(--felt); }
.quick-points strong { color: var(--ink); display: block; }
.quick-more { margin-top: 1.5rem; color: var(--ink-2); max-width: var(--measure); }
@media (max-width: 860px) { .quick-demo { grid-template-columns: 1fr; } }