/* convey · engine.css
   Shared layout primitives for all three skins (plus _default). Refactored
   from prototype-v6/ob.css and shared/menu.css: the type scale, the section
   grids, and the bottom-right menu survive; the orb, the custom cursor and
   the 3d cloud do not (dropped per CONTRACT.md; a skin's hero.js may add
   its own hero object instead).

   A skin never changes markup. A skin is skin.css + loader.js + hero.js +
   mark.svg, and skin.css's job is to redeclare the custom properties below
   (plus, optionally, @media (prefers-color-scheme) / [data-theme] pairs if
   it declares dark support). Nothing in this file names a skin.

   Phone first: every rule below is the small-screen rule; min-width media
   queries layer on the wider layouts. See final/ENGINE-README.md.
*/

/* ---------- 1. tokens (a skin overrides these; these are safe fallbacks) ---------- */
:root {
  /* the ten named in CONTRACT.md */
  --bg: #e5e4e0;
  --ink: #1d1d1d;
  --ink-soft: rgba(29, 29, 29, 0.6);
  --accent: #ff6b5c;
  --rule: rgba(29, 29, 29, 0.18);
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --radius: 12px;
  --weight-display: 600;

  /* extras a skin may use or leave at these defaults */
  --weight-body: 400;
  --case-display: none; /* a skin may set 'uppercase' */
  --tracking-display: normal;
  --tracking-body: normal;
  --card: rgba(29, 29, 29, 0.04);
  --card-2: rgba(29, 29, 29, 0.07);
  --focus-ring: var(--accent);
  --gutter: 20px;
  --container: 1200px;
  --space-section: 72px;
  --space-section-tight: 44px;
  --duration: 0.5s;
  --duration-fast: 0.25s;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --z-menu: 1000;
  --z-loader: 1100;
  --good: #15803d;
}

@media (min-width: 700px) {
  :root {
    --gutter: 32px;
    --space-section: 110px;
    --space-section-tight: 70px;
  }
}

/* ---------- 2. reset ---------- */
* {
  box-sizing: border-box;
}
html,
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
  padding: 0;
}
html {
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}
body {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  letter-spacing: var(--tracking-body);
  font-size: 16px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--ink);
  overflow-x: clip;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}
ul,
ol {
  list-style: none;
}
::selection {
  background: var(--ink);
  color: var(--bg);
}
main {
  position: relative;
  display: block;
}

/* ---------- 3. type scale ---------- */
.type-display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-transform: var(--case-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.02;
}
.type-hero {
  font-size: clamp(38px, 9vw, 96px);
}
.type-h1 {
  font-size: clamp(32px, 7vw, 64px);
}
.type-h2 {
  font-size: clamp(24px, 4.2vw, 40px);
}
.type-h3 {
  font-size: clamp(20px, 2.6vw, 28px);
}
.type-body {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.55;
}
.type-body.lg {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.5;
}
.type-small {
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.type-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.eyebrow {
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 14px;
}

/* ---------- 4. layout primitives ---------- */
.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
/* No transitions until the first paint has settled: a skin stylesheet that lands
   after the engine's otherwise animates every button from the engine's colors to
   the skin's (measured at about 250ms on V2). engine.js adds html.ready after two
   animation frames. */
html:not(.ready) *,
html:not(.ready) *::before,
html:not(.ready) *::after {
  transition: none !important;
}
/* A closed menu panel is not merely transparent: it is hidden (visibility waits for
   the fade so the close still animates). Long URLs and words wrap instead of forcing
   a sideways scroll on phones. Wide tables scroll inside their own box. */
.menu-panel:not([data-open="true"]) { visibility: hidden; transition: opacity var(--duration-fast), transform var(--duration) var(--ease), visibility 0s linear var(--duration); }
.sec-text p, .sec-faq p, .sec-faq dd, .sec-list p, .form-status { overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.table-wrap table { min-width: 100%; }
/* Every number carries its window on the page, not only in a hover note. */
.tile .w, .wcard-nums .w, .ba-k, .referee-grid .w { display: block; font-size: 12px; line-height: 1.35; color: var(--ink-soft); margin-top: 4px; letter-spacing: 0.01em; }

/* Tables on phones: a three-column results table (what, value, window) stacks into
   blocks; a wider table scrolls inside its box, can take keyboard focus, and says so. */
@media (max-width: 640px) {
  .table-wrap.stack table, .table-wrap.stack tbody, .table-wrap.stack tr, .table-wrap.stack td { display: block; width: 100%; }
  .table-wrap.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-wrap.stack tr { padding: 12px 0; border-top: 1px solid var(--rule); }
  .table-wrap.stack td { padding: 2px 0; border: 0; }
  .table-wrap.stack td:first-child { font-size: 13px; color: var(--ink-soft); }
  .table-wrap.stack td:nth-child(2) { font-size: 1.4rem; line-height: 1.2; }
  .table-wrap.stack td:nth-child(3) { font-size: 12px; color: var(--ink-soft); }
  .table-wrap:not(.stack) { position: relative; }
  .table-wrap:not(.stack)::after { content: "scroll sideways for the rest"; display: block; font-size: 12px; color: var(--ink-soft); padding: 6px 0 0; }
  .table-wrap:not(.stack):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}
/* The header pill and wordmark on a 320px phone: wrap instead of overflow. */
@media (max-width: 360px) {
  .site-header { flex-wrap: wrap; gap: 6px 10px; }
  .site-header .cta-pill { padding-inline: 10px; font-size: 11px; letter-spacing: 0.04em; }
}
.skip-link {
  position: absolute;
  left: 10px;
  top: -60px;
  z-index: 2000;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  transition: top var(--duration-fast) var(--ease);
}
.skip-link:focus {
  top: 10px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
/* a honeypot field: off-screen rather than display:none, since some bots
   skip the more obvious hiding techniques; see engine/forms.js */
.hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--bg);
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.btn:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.btn.solid {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.btn.solid:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn.sm {
  height: 40px;
  padding: 0 18px;
  font-size: 12px;
}
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
  margin-right: 8px;
  vertical-align: middle;
}

/* ---------- 5. header ---------- */
.site-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px var(--gutter);
}
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 20px;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.wordmark i {
  font-style: normal;
  color: var(--accent);
}
.site-header .cta-pill {
  flex: 0 0 auto;
}

/* ---------- 6. the bottom-right menu (refactored from shared/menu.css) ---------- */
.menu-toggle {
  position: fixed;
  right: var(--gutter);
  bottom: 20px;
  z-index: var(--z-menu);
  width: 48px;
  height: 48px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background var(--duration-fast), opacity var(--duration-fast);
}
.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
}
.menu-toggle:hover {
  background: var(--card);
}
.menu-toggle[aria-expanded="true"] {
  opacity: 0;
  pointer-events: none;
}
.menu-panel {
  position: fixed;
  right: var(--gutter);
  bottom: 20px;
  z-index: calc(var(--z-menu) + 1);
  width: min(320px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 36px 32px 24px;
  border: 1px solid var(--rule);
  border-radius: calc(var(--radius) + 4px);
  background: var(--bg);
  color: var(--ink);
  transform-origin: 100% 100%;
  opacity: 0;
  transform: scale(0.94) translateY(8px);
  pointer-events: none;
  transition: opacity var(--duration-fast), transform var(--duration) var(--ease);
}
.menu-panel[data-open="true"] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.menu-panel .panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}
.menu-panel nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--rule);
  padding: 10px 0 8px;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.menu-panel nav a[aria-current="page"] {
  color: var(--ink-soft);
}
.menu-panel .panel-sub {
  display: flex;
  gap: 16px;
  margin: 26px 0 22px;
  flex-wrap: wrap;
}
.menu-panel .panel-sub a {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
}
.dark-toggle {
  display: none;
  width: 64px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  position: relative;
  background: var(--card);
  margin-top: 18px;
}
[data-has-dark] .dark-toggle {
  display: inline-flex;
}
.dark-toggle span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--ink);
  transition: transform var(--duration) var(--ease);
}
:root[data-theme="dark"] .dark-toggle span {
  transform: translateX(40px);
}
.menu-close {
  position: absolute;
  right: 22px;
  bottom: 18px;
  width: 28px;
  height: 28px;
  font-size: 26px;
  line-height: 1;
  opacity: 0.7;
}
.menu-close:hover {
  opacity: 1;
}

/* ---------- 7. footer ---------- */
.site-footer {
  padding: var(--space-section) var(--gutter) 48px;
  border-top: 1px solid var(--rule);
}
.site-footer .foot-lines p {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(22px, 3.6vw, 36px);
  line-height: 1.15;
  max-width: 640px;
}
.site-footer .foot-lines p + p {
  margin-top: 8px;
}
.site-footer .foot-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 48px;
}
.site-footer h5,
.site-footer .foot-h {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: var(--weight-body);
  margin-bottom: 12px;
}
.site-footer li {
  font-size: 13px;
  letter-spacing: 0.02em;
  line-height: 2;
}
.site-footer .foot-bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 56px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
@media (min-width: 700px) {
  .site-footer .foot-cols {
    grid-template-columns: repeat(3, 1fr);
  }
  .site-footer .foot-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* ---------- 8. section base ---------- */
.sec {
  position: relative;
  padding: var(--space-section) var(--gutter);
}
.sec.tight {
  padding: var(--space-section-tight) var(--gutter);
}
.sec > .wrap,
.sec {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}
.sec-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.sec-head h2 {
  max-width: 820px;
}
.sec-head p {
  max-width: 560px;
  color: var(--ink-soft);
}
@media (min-width: 700px) {
  .sec-head {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
  }
}

/* ---------- 9. hero / page header (sec-hero, used on every route) ---------- */
.sec-hero {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: calc(var(--space-section) + 20px);
  min-height: 72vh;
}
body[data-route="/"] .sec-hero {
  min-height: 92vh;
  justify-content: space-between;
}
.sec-hero h1 {
  max-width: 1000px;
}
.sec-hero .hero-sub {
  max-width: 640px;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.5;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 6px;
}
.hero-note {
  font-size: 12.5px;
  color: var(--ink-soft);
}
.hero-object {
  position: relative;
  min-height: 1px;
}
.hero-media {
  position: relative;
  margin-top: 8px;
  max-width: 720px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--card);
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-media video {
  /* no object-fit on video, per CONTRACT.md; cropped by the box above */
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}
.read-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 560px;
  margin-top: 10px;
}
.read-form .field-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 560px) {
  .read-form .field-row {
    flex-direction: row;
  }
}
.read-form input {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---------- 10. statement ---------- */
.sec-statement .wrap {
  max-width: 760px;
}
.sec-statement h2 {
  margin-bottom: 14px;
}

/* ---------- 11. proof ---------- */
.sec-proof .proof-tile {
  display: grid;
  gap: 16px;
}
.sec-proof .proof-value {
  font-size: clamp(56px, 11vw, 140px);
  line-height: 0.95;
}
.sec-proof .proof-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 520px;
}
.sec-proof .proof-caveat {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 12.5px;
  color: var(--ink-soft);
  max-width: 560px;
}

/* ---------- 12. brain ---------- */
.sec-brain .brain-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 8px;
}
.sec-brain .brain-items li {
  background: var(--bg);
  padding: 22px 18px;
  font-family: var(--font-display);
  font-size: clamp(16px, 2vw, 20px);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sec-brain .brain-items li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}
@media (min-width: 700px) {
  .sec-brain .brain-items {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ---------- 13. board ---------- */
.board {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  margin-top: 8px;
}
.board .board-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.board .tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
}
.board .tile {
  background: var(--bg);
  padding: 20px 16px;
}
.board .tile .k {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.board .tile .v {
  font-family: var(--font-mono);
  font-size: clamp(26px, 3.4vw, 44px);
  margin: 10px 0;
}
.board .tile .why {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.board .tab-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
}
.board .tab-grid figure {
  background: var(--bg);
  margin: 0;
  padding: 14px;
}
.board .tab-grid img {
  width: 100%;
  border-radius: 6px;
}
.board .tab-grid figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.board .tab-grid .tab-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--ink);
}
@media (min-width: 700px) {
  .board .tiles {
    grid-template-columns: repeat(4, 1fr);
  }
  .board .tab-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- 14. referee ---------- */
.sec-referee .referee-grid {
  display: grid;
  gap: 24px;
}
.sec-referee .referee-num {
  font-family: var(--font-mono);
  font-size: clamp(64px, 14vw, 180px);
  line-height: 0.88;
}
.sec-referee .referee-claim .referee-num {
  color: var(--ink-soft);
}
.sec-referee .referee-claim {
  position: relative;
}
.sec-referee .referee-recorded .referee-num {
  color: var(--accent);
}
.sec-referee p {
  max-width: 520px;
  margin-top: 10px;
}
@media (min-width: 700px) {
  .sec-referee .referee-grid {
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }
}

/* ---------- 15. before / after ---------- */
.sec-before-after .ba-rows {
  border-top: 1px solid var(--rule);
}
.sec-before-after .ba-row {
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: 14px;
}
.sec-before-after .ba-brand {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-transform: var(--case-display);
  font-size: clamp(20px, 2.4vw, 30px);
}
.sec-before-after .ba-states {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  font-size: 14px;
}
.sec-before-after .ba-states .lab {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.sec-before-after .ba-num {
  font-family: var(--font-mono);
  font-size: clamp(22px, 2.6vw, 30px);
}
.sec-before-after .ba-caveat {
  font-size: 12px;
  color: var(--ink-soft);
}
@media (min-width: 700px) {
  .sec-before-after .ba-row {
    grid-template-columns: 180px 1fr 160px;
    align-items: start;
  }
}

/* ---------- 16. terms ---------- */
.sec-terms ul {
  display: grid;
  gap: 16px;
  border-top: 1px solid var(--rule);
  padding-top: 20px;
}
.sec-terms li {
  padding-left: 20px;
  position: relative;
  font-size: 15px;
  line-height: 1.5;
  max-width: 640px;
}
.sec-terms li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- 17. install / operate ---------- */
.io-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.io-col {
  border-top: 2px solid var(--ink);
  padding-top: 18px;
}
.io-col ul {
  margin-top: 16px;
  display: grid;
  gap: 10px;
  font-size: 14.5px;
}
.io-col li {
  padding-left: 18px;
  position: relative;
}
.io-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.io-capacity {
  margin-top: 28px;
  font-size: 15px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.io-price {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: clamp(20px, 2.2vw, 28px);
}
@media (min-width: 700px) {
  .io-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

/* ---------- 18. ask ---------- */
.sec-ask {
  text-align: left;
}
.sec-ask .ask-inner {
  max-width: 720px;
}
.sec-ask h2 {
  margin-bottom: 10px;
}

/* ---------- 19. cards (work index) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.wcard {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--rule);
}
.wcard .wcard-media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--card-2);
}
.wcard .wcard-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wcard .wcard-media video {
  /* CONTRACT.md design rule: no object-fit on <video> (iOS paints it at half
     size). Cropped by the parent's own overflow:hidden + fixed aspect-ratio. */
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  object-fit: initial;
}
.wcard .wcard-body {
  padding: 18px 20px 22px;
}
.wcard .wcard-brand {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-transform: var(--case-display);
  font-size: clamp(20px, 2.4vw, 28px);
}
.wcard .wcard-nums {
  display: flex;
  gap: 20px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.wcard .wcard-nums .v {
  font-family: var(--font-mono);
  font-size: 20px;
  display: block;
}
.wcard .wcard-nums .k {
  font-size: 11px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
@media (min-width: 700px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 980px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- 20. table ---------- */
.sec-table {
  overflow-x: auto;
}
.sec-table table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 14px;
}
.sec-table th,
.sec-table td {
  text-align: left;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.sec-table th {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: var(--weight-body);
}
.sec-table .table-caveat {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* ---------- 21. list ---------- */
.item-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  border-top: 1px solid var(--rule);
  padding-top: 24px;
}
.item-list .item h3 {
  font-size: clamp(18px, 2vw, 24px);
  margin-bottom: 8px;
}
.item-list .item p {
  color: var(--ink-soft);
  max-width: 560px;
}
@media (min-width: 700px) {
  .item-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- 22. faq ---------- */
.faq-list {
  border-top: 1px solid var(--rule);
}
.faq-item {
  border-bottom: 1px solid var(--rule);
  padding: 20px 0;
}
.faq-item summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.9vw, 20px);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
}
.faq-item[open] summary::after {
  content: "\2212";
}
.faq-item p {
  margin-top: 14px;
  color: var(--ink-soft);
  max-width: 640px;
}

/* ---------- 23. text ---------- */
.sec-text .text-body {
  display: grid;
  gap: 16px;
  max-width: 720px;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
}

/* ---------- 24. people ---------- */
.people-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.people-card {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--rule);
}
.people-card .people-media {
  aspect-ratio: 4/3;
  background: var(--card-2);
}
.people-card .people-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.people-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(32px, 6vw, 56px);
  color: var(--ink-soft);
}
.people-card .people-body {
  padding: 20px;
}
.people-card .people-name {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 28px);
}
.people-card .people-role {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 8px 0 10px;
}
@media (min-width: 700px) {
  .people-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- 25. archive ---------- */
.archive-list {
  border-top: 1px solid var(--rule);
}
.archive-row {
  border-bottom: 1px solid var(--rule);
}
.archive-row summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 18px 0;
  font-family: var(--font-display);
  font-size: clamp(16px, 2vw, 22px);
}
.archive-row summary::-webkit-details-marker {
  display: none;
}
.archive-row summary .archive-sub {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.archive-row .archive-detail {
  padding: 0 0 24px;
}
.archive-row .archive-detail img {
  border-radius: var(--radius);
  max-width: 480px;
}
.archive-row .archive-detail p {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 13px;
  max-width: 560px;
}

/* ---------- 26. forms (engine/forms.js) ---------- */
.site-form {
  max-width: 640px;
}
.site-form .field {
  margin-bottom: 20px;
}
.site-form label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.site-form input,
.site-form select,
.site-form textarea {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  outline: none;
}
.site-form input:focus,
.site-form select:focus,
.site-form textarea:focus {
  border-color: var(--ink);
}
.site-form textarea {
  min-height: 110px;
  resize: vertical;
}
.site-form .form-notice {
  margin-top: 12px;
  font-size: 12px;
  color: var(--ink-soft);
}
.site-form .form-status {
  margin-top: 14px;
  font-size: 14px;
}
.site-form .form-status[data-state="ok"] {
  color: var(--good);
}
.site-form .form-status[data-state="error"] {
  color: var(--accent);
}
.site-form[data-sent="true"] form {
  display: none;
}
.site-form .form-done {
  display: none;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 28px);
}
.site-form[data-sent="true"] .form-done {
  display: block;
}

/* ---------- 27. reveals + counters ----------
   Default state is fully visible (opacity:1, no transform). Only once
   engine.js has wired an IntersectionObserver AND pre-revealed anything
   already on screen does it mark the document ready to hide the rest for
   the enhancement. A reveal only ever enhances; it never gates reading. */
.rv {
  opacity: 1;
  transform: none;
}
[data-reveal-ready="true"] .rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
[data-reveal-ready="true"] .rv.is-revealed {
  opacity: 1;
  transform: none;
}
.stat-count {
  font-variant-numeric: tabular-nums;
}

/* ---------- 28. loader ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  background: var(--bg);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader[hidden] {
  display: none;
}
.loader .loader-mark {
  width: 120px;
  max-width: 40vw;
}

/* ---------- 29. reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal-ready="true"] .rv {
    opacity: 1;
    transform: none;
    transition: none;
  }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}