/*
 * WS-2 (2026-10-30): /mojo/ and /mojo/spec/. Same WS-1 system (type scale, rules, split grids), with the Mojo
 * brand orange as the one accent instead of champagne gold. Two tones per theme, never a fill:
 *   light — #B4430A small text/links (5.18:1 on #F7F6F2, 4.82:1 on the #EFEEE9 band), #E8590C large type and hairlines (3.31:1);
 *   dark  — #FA982E small text (9.04:1 on #0A0A0B), #FB6A12 large type (6.76:1), #B4430A hairlines.
 * The mascots' own gradient (#FB560C → #FA982E) stays inside the character, as in DS-3a.
 */
.mojo-page { --gold: #b4430a; --gold-display: #e8590c; --gold-line: #e8590c; --gold-hi: #8f3505; --gold-soft: rgba(232, 89, 12, .08); --cta-mark: #fa982e; --m-ink: #0b0b0b; --m-paper: var(--bg); }
.mojo-page .trust { --gold: #b4430a; }
:root[data-theme="dark"] .mojo-page, :root[data-theme="dark"] .mojo-page .trust { --gold: #fa982e; --gold-display: #fb6a12; --gold-line: #b4430a; --gold-hi: #ffb15c; --gold-soft: rgba(250, 152, 46, .06); --cta-mark: #c2480a; --m-ink: #f4f4f1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mojo-page, :root:not([data-theme="light"]) .mojo-page .trust { --gold: #fa982e; --gold-display: #fb6a12; --gold-line: #b4430a; --gold-hi: #ffb15c; --gold-soft: rgba(250, 152, 46, .06); --cta-mark: #c2480a; --m-ink: #f4f4f1; }
}
.mojo-page .trust { --m-paper: var(--bg-2); }

/* mascots */
.mascot { display: block; overflow: visible; }
.mascot .eyes { transform-box: fill-box; transform-origin: 50% 50%; }
.mascot--hero { width: clamp(200px, 30vw, 440px); height: auto; margin-left: auto; }
.mascot--sm { width: 44px; height: 44px; }
.mascot--close { width: clamp(72px, 9vw, 120px); height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .mascot--hero .all { transform-box: fill-box; transform-origin: 50% 100%; animation: mj-idle 5.6s var(--ease) infinite; }
  .mascot--hero .eyes, .mascot--close .eyes { animation: mj-blink 6.4s infinite; }
}
@keyframes mj-idle { 0%, 100% { transform: translateY(0) rotate(0); } 45% { transform: translateY(-2.2%) rotate(-1.2deg); } 70% { transform: translateY(0) rotate(.8deg); } }
@keyframes mj-blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.1); } }

/* hero */
.mj-hero { padding: 150px 0 clamp(72px, 9vw, 128px); }
.mj-hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 110px); align-items: end; }
.mj-hero .display { font-size: clamp(48px, 6.4vw, 112px); }
.mj-stage { display: flex; flex-direction: column; align-items: flex-end; gap: 36px; }
.faces { list-style: none; margin: 0; padding: 18px 0 0; display: flex; gap: 26px; border-top: 1px solid var(--line); width: 100%; justify-content: flex-end; }
.faces li { display: flex; gap: 12px; align-items: center; }
.faces li div { display: grid; }
.faces b { font-family: var(--font-display-light); font-size: 17px; line-height: 1.1; }
.faces span { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }

/* status labels: the word carries the meaning, the dot echoes it */
.st { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--ink); }
.st i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.st--live i { background: var(--gold); }
.st--beta i { border: 1.5px solid var(--gold); }
.st--soon { color: var(--ink-3); }
.st--soon i { border: 1.5px dashed var(--ink-3); }
.st--na { color: var(--ink-3); font-family: var(--font-mono); }
.st small { font-size: 11.5px; color: var(--ink-3); text-transform: none; letter-spacing: 0; margin-left: 2px; }
.st small::before { content: "· "; }

.mj-list li { grid-template-columns: 56px 1fr auto; align-items: start; }
.mj-list li .st { padding-top: 5px; }

/* delegate flow: four numbered columns on one rule */
.flow { list-style: none; padding: 0; margin: clamp(48px, 7vw, 96px) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: f; border-top: 1px solid var(--line-strong); }
.flow li { padding: 28px 28px 0 0; }
.flow li + li { border-left: 1px solid var(--line); padding-left: 28px; }
.flow li::before { counter-increment: f; content: "0" counter(f); display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(48px, 6vw, 96px); line-height: .9; letter-spacing: -0.05em; color: var(--gold-display); margin-bottom: 22px; }
.flow b { display: block; font-family: var(--font-display-light); font-size: 22px; letter-spacing: -0.01em; margin-bottom: 10px; }
.flow span { color: var(--ink-2); font-size: 15.5px; }
.mojo .fact .st { margin-top: 14px; }

/* devices */
.devs { display: grid; grid-template-columns: 4fr 4fr 5fr; margin-top: clamp(48px, 7vw, 96px); border-top: 1px solid var(--line-strong); }
.dev { padding: 28px 28px 0 0; }
.dev + .dev { border-left: 1px solid var(--line); padding-left: 28px; }
.dev .mono { margin: 0 0 10px; font-size: 12px; }
.dev h3 { font-size: clamp(28px, 3vw, 44px); letter-spacing: -0.02em; margin: 0 0 14px; font-family: var(--font-display-light); }
.dev p.muted { margin-top: 14px; font-size: 15.5px; }

/* models key-value */
.kv { list-style: none; padding: 0; margin: 32px 0 0; }
.kv li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); font-family: var(--font-display-light); font-size: 19px; }

/* scenes */
.scenes { list-style: none; padding: 0; margin: clamp(48px, 7vw, 96px) 0 0; border-top: 1px solid var(--line-strong); }
.scenes li { display: grid; grid-template-columns: 1fr minmax(160px, 240px) 96px; gap: 24px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--line); }
.scenes q { quotes: none; font-family: var(--font-display-light); font-weight: 700; font-size: clamp(22px, 2.6vw, 38px); line-height: 1.2; letter-spacing: -0.02em; }
.scenes .mono { font-size: 12px; text-transform: none; letter-spacing: .02em; }

/* close */
.mj-close { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: end; }
.mj-sign { display: flex; align-items: flex-end; gap: 20px; color: var(--ink); }
.mj-sign .wm { width: clamp(180px, 20vw, 300px); height: auto; }

/* spec page */
.legend { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-top: 32px; font-size: 14px; }
.spec-sec { padding: clamp(56px, 7vw, 104px) 0; border-top: 1px solid var(--line); }
.spec-sec h2 { font-size: clamp(32px, 3.6vw, 56px); }
.spec-h3 { font-family: var(--font-display-light); font-size: clamp(22px, 2.2vw, 30px); margin-top: 48px; }
.spec-t td:first-child { width: 34%; }
.spec-t td:nth-child(2) { width: 1%; white-space: nowrap; padding-right: 28px; }
.parity td:first-child { width: auto; }
.parity td:not(:first-child) { width: 1%; white-space: nowrap; padding-right: 28px; }
#source { border-top: 0; padding-top: 0; }

@media (max-width: 900px) {
  .mj-hero { padding-top: 112px; }
  .mj-hero-grid, .mj-close { grid-template-columns: 1fr; }
  .mj-stage { align-items: flex-start; flex-direction: column-reverse; }
  .mascot--hero { width: clamp(150px, 44vw, 240px); margin: 0; }
  .faces { justify-content: flex-start; flex-wrap: wrap; gap: 16px 22px; }
  .flow, .devs { grid-template-columns: 1fr 1fr; }
  .flow li:nth-child(3) { border-left: 0; padding-left: 0; }
  .flow li { padding-bottom: 28px; }
  .devs { grid-template-columns: 1fr; }
  .dev + .dev { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); margin-top: 28px; }
  .scenes li { grid-template-columns: 1fr auto; gap: 10px 16px; }
  .scenes q { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .flow { grid-template-columns: 1fr; }
  .flow li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .mj-list li { grid-template-columns: 40px 1fr; }
  .mj-list li .st { grid-column: 2; padding-top: 0; }
  .kv li { font-size: 17px; }
  .mj-sign .wm { width: 180px; }
  /* tables become stacked rows */
  .spec-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .spec-t, .spec-t tbody { display: block; }
  .spec-t tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; padding: 14px 0; border-top: 1px solid var(--line); }
  .spec-t td { display: block; border: 0; padding: 0; width: auto !important; }
  .spec-t td:nth-child(3) { grid-column: 1 / -1; }
  .spec-t td:empty { display: none; }
  .parity tr { grid-template-columns: repeat(3, 1fr); }
  .parity td:first-child { grid-column: 1 / -1; }
  .parity td[data-l]::before { content: attr(data-l); display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 4px; }
  .parity td:nth-child(3) { grid-column: auto; }
}