/* Jaryo case study: Jaryo type roles from the lab (lab.css, docs/TYPOGRAPHY-PRINCIPLES.md).
   Typography 1 reference: mono for labels and IDs, sans for reading at line-height 1.5,
   spaced capitals for meta lines, black and white only, square corners. */
body[data-page="jaryo"] {
  --paper: #ffffff;
  --surface: #f4f4f4;
  --ink: #000000;
  --muted: #4d4d4d;
  --rule: #000000;
  --accent: #000000;
  --focus: #000000;
  --jaryo-mono: "IBM Plex Mono", "JetBrains Mono", Menlo, "DejaVu Sans Mono", ui-monospace, monospace;
  --jaryo-sans: "IBM Plex Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: var(--jaryo-mono);
  --sans: var(--jaryo-sans);
  font-family: var(--jaryo-sans);
  background: var(--paper);
}
@media (prefers-color-scheme: dark) {
  body[data-page="jaryo"] {
    --paper: #0c0c0c;
    --surface: #1a1a1a;
    --ink: #f0f0f0;
    --muted: #ababab;
    --rule: #f0f0f0;
    --accent: #f0f0f0;
    --focus: #f0f0f0;
  }
}
body[data-page="jaryo"] main :is(h1, h2, h3) {
  font-family: var(--jaryo-mono);
  font-weight: 700;
  letter-spacing: -0.01em;
}
body[data-page="jaryo"] main :is(.eyebrow, .article-kind, .product-role, .product-facts, .byline, .fact-grid b, .case-nav > span, .project-details .eyebrow, .status-label) {
  font-family: var(--jaryo-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
body[data-page="jaryo"] main :is(figcaption, code) {
  font-family: var(--jaryo-mono);
}
body[data-page="jaryo"] .prose :is(p, li) {
  font-family: var(--jaryo-sans);
  line-height: 1.5;
}
body[data-page="jaryo"] main :is(.button, .mark-box, .fact-grid, .fact-grid > div, img) {
  border-radius: 0;
}
body[data-page="jaryo"] .prose .project-mark .mark-box {
  background: var(--ink);
  color: var(--paper);
}
body[data-page="jaryo"] .product-role {
  font-size: clamp(16px, 2.2vw, 22px);
  line-height: 1.35;
}

body[data-page="jaryo"] .product-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-block: 28px;
}

/* Keep the version string as written (v0.2.0), not uppercased. */
body[data-page="jaryo"] .product-facts span:last-child {
  text-transform: none;
}