:root {
    /* Solo-Man palette */
    --sm-bg:          #F5F0E8;
    --sm-bg-alt:      #EDE7DA;
    --sm-bg-dark:     #2C2824;
    --sm-text:        #3D3529;
    --sm-text-muted:  #8A7E6E;
    --sm-accent:      #C4713B;
    --sm-accent-soft: #D4956A;
    --sm-border:      #D5CBBA;
    --sm-border-dark: #B5A893;
    --sm-gold:        #B8963E;
    --sm-shadow:      rgba(60, 53, 41, 0.08);

    /* Typography */
    --font-display: 'Cormorant Garamond', 'Georgia', serif;
    --font-body:    'Source Serif 4', 'Georgia', serif;

    /* Spacing */
    --cell-pad-x: 1.25rem;
    --cell-pad-y: 0.875rem;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--sm-text);
    background: var(--sm-bg);
    padding: 2rem 1rem;
    -webkit-font-smoothing: antialiased;
  }

  .container {
    max-width: 820px;
    margin: 0 auto;
  }

  h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.75rem;
    margin: 3rem 0 0.5rem;
    color: var(--sm-text);
    letter-spacing: -0.01em;
  }

  h2 .kanji {
    color: var(--sm-accent);
    font-size: 0.85em;
    margin-left: 0.35em;
  }

  .subtitle {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--sm-text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
  }

  p.desc {
    color: var(--sm-text-muted);
    font-size: 0.92rem;
    margin-bottom: 1.5rem;
    max-width: 65ch;
  }

  hr.divider {
    border: none;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      var(--sm-border) 20%,
      var(--sm-border-dark) 50%,
      var(--sm-border) 80%,
      transparent 100%
    );
    margin: 3.5rem 0;
  }

  /* ─────────────────────────────────────────────────────────
     BASE TABLE — Desktop
     Clean, borderless Japanese aesthetic.
     ───────────────────────────────────────────────────────── */

  .sm-table-wrap {
    width: 100%;
    margin: 1.5rem 0 2.5rem;
  }

  .sm-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 0.925rem;
    line-height: 1.55;
  }

  /* Header */
  .sm-table thead th {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sm-text-muted);
    padding: var(--cell-pad-y) var(--cell-pad-x);
    text-align: left;
    border-bottom: 2px solid var(--sm-border-dark);
    vertical-align: bottom;
    white-space: nowrap;
  }

  /* First column header — often a label column */
  .sm-table thead th:first-child {
    color: var(--sm-accent);
    font-size: 0.75rem;
    min-width: 140px;
  }

  /* Body rows */
  .sm-table tbody tr {
    transition: background-color 0.2s ease;
  }

  .sm-table tbody tr:hover {
    background-color: var(--sm-bg-alt);
  }

  .sm-table tbody td {
    padding: var(--cell-pad-y) var(--cell-pad-x);
    border-bottom: 1px solid var(--sm-border);
    vertical-align: top;
    color: var(--sm-text);
  }

  /* Last row — no border */
  .sm-table tbody tr:last-child td {
    border-bottom: none;
  }

  /* Row label (first column) */
  .sm-table tbody td:first-child {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--sm-text);
    position: relative;
    padding-left: calc(var(--cell-pad-x) + 0.5rem);
  }

  .sm-table tbody td:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(var(--cell-pad-y) + 0.4em);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--sm-accent-soft);
  }

  /* ─────────────────────────────────────────────────────────
     COMPARISON VARIANT — 2 columns side by side
     Visual emphasis on the contrast.
     ───────────────────────────────────────────────────────── */

  .sm-table--compare thead th:nth-child(2) {
    color: var(--sm-text-muted);
    opacity: 0.7;
  }

  .sm-table--compare thead th:nth-child(3),
  .sm-table--compare thead th:last-child:not(:nth-child(2)) {
    color: var(--sm-accent);
  }

  /* Subtle highlight on the "warrior" column */
  .sm-table--compare tbody td:last-child:not(:nth-child(2)) {
    background: rgba(196, 113, 59, 0.04);
  }

  .sm-table--compare tbody tr:hover td:last-child:not(:nth-child(2)) {
    background: rgba(196, 113, 59, 0.08);
  }

  /* ─────────────────────────────────────────────────────────
     DARK VARIANT — for dark backgrounds
     ───────────────────────────────────────────────────────── */

  .sm-table-wrap--dark {
    background: var(--sm-bg-dark);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0 2.5rem;
  }

  .sm-table-wrap--dark .sm-table thead th {
    color: rgba(245, 240, 232, 0.5);
    border-bottom-color: rgba(245, 240, 232, 0.15);
  }

  .sm-table-wrap--dark .sm-table thead th:first-child {
    color: var(--sm-accent-soft);
  }

  .sm-table-wrap--dark .sm-table tbody td {
    color: rgba(245, 240, 232, 0.85);
    border-bottom-color: rgba(245, 240, 232, 0.08);
  }

  .sm-table-wrap--dark .sm-table tbody td:first-child {
    color: #F5F0E8;
  }

  .sm-table-wrap--dark .sm-table tbody td:first-child::before {
    background: var(--sm-accent);
  }

  .sm-table-wrap--dark .sm-table tbody tr:hover {
    background: rgba(245, 240, 232, 0.04);
  }

  .sm-table-wrap--dark .sm-table--compare tbody td:last-child:not(:nth-child(2)) {
    background: rgba(196, 113, 59, 0.08);
  }

  .sm-table-wrap--dark .sm-table--compare tbody tr:hover td:last-child:not(:nth-child(2)) {
    background: rgba(196, 113, 59, 0.14);
  }

  /* ─────────────────────────────────────────────────────────
     MOBILE RESPONSIVE — The magic. No scroll. Ever.
     
     Strategy: 
     • ≤768px — table becomes stacked cards
     • Each <tr> becomes a card
     • <th> content injected via data-label + ::before
     • Works for ANY number of columns
     ───────────────────────────────────────────────────────── */

  @media (max-width: 768px) {
    :root {
      --cell-pad-x: 1rem;
      --cell-pad-y: 0.65rem;
    }

    .sm-table,
    .sm-table thead,
    .sm-table tbody,
    .sm-table th,
    .sm-table td,
    .sm-table tr {
      display: block;
    }

    /* Hide header row — labels come from data-label */
    .sm-table thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      white-space: nowrap;
    }

    /* Each row = card */
    .sm-table tbody tr {
      background: #fff;
      border-radius: 6px;
      padding: 0.75rem 0;
      margin-bottom: 1rem;
      box-shadow: 0 1px 3px var(--sm-shadow), 0 0 0 1px rgba(213, 203, 186, 0.3);
      overflow: hidden;
    }

    .sm-table tbody tr:hover {
      background: #fff;
    }

    .sm-table tbody tr:last-child {
      margin-bottom: 0;
    }

    /* Each cell = label + value row */
    .sm-table tbody td {
      display: flex;
      align-items: baseline;
      gap: 0.75rem;
      padding: 0.5rem 1rem;
      border-bottom: 1px solid rgba(213, 203, 186, 0.25);
      font-size: 0.9rem;
    }

    .sm-table tbody td:last-child {
      border-bottom: none;
    }

    /* Reset first-column styling */
    .sm-table tbody td:first-child {
      padding-left: 1rem;
      font-size: 0.95rem;
      background: var(--sm-bg-alt);
      padding-top: 0.65rem;
      padding-bottom: 0.65rem;
      border-bottom: 1px solid var(--sm-border);
    }

    .sm-table tbody td:first-child::before {
      display: none;
    }

    /* Label from data-label */
    .sm-table tbody td[data-label]::before {
      content: attr(data-label);
      flex: 0 0 auto;
      min-width: 35%;
      max-width: 40%;
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 0.78rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--sm-text-muted);
      line-height: 1.4;
    }

    /* First cell is the card title — full width, no label */
    .sm-table tbody td:first-child::before {
      display: none !important;
    }

    .sm-table tbody td:first-child {
      display: block;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1rem;
      color: var(--sm-accent);
    }

    /* Comparison variant — highlight */
    .sm-table--compare tbody td:last-child:not(:nth-child(2)) {
      background: rgba(196, 113, 59, 0.05);
      border-radius: 0 0 6px 6px;
    }

    /* ── Dark variant mobile ── */
    .sm-table-wrap--dark {
      padding: 1rem;
      background: var(--sm-bg-dark);
    }

    .sm-table-wrap--dark .sm-table tbody tr {
      background: rgba(245, 240, 232, 0.05);
      box-shadow: 0 0 0 1px rgba(245, 240, 232, 0.08);
    }

    .sm-table-wrap--dark .sm-table tbody tr:hover {
      background: rgba(245, 240, 232, 0.05);
    }

    .sm-table-wrap--dark .sm-table tbody td {
      color: rgba(245, 240, 232, 0.8);
      border-bottom-color: rgba(245, 240, 232, 0.06);
    }

    .sm-table-wrap--dark .sm-table tbody td:first-child {
      background: rgba(0,0,0,0.2);
      color: var(--sm-accent-soft);
      border-bottom-color: rgba(245, 240, 232, 0.08);
    }

    .sm-table-wrap--dark .sm-table tbody td[data-label]::before {
      color: rgba(245, 240, 232, 0.4);
    }
  }

  /* ─────────────────────────────────────────────────────────
     SMALL MOBILE (≤480px) — tighter spacing
     ───────────────────────────────────────────────────────── */

  @media (max-width: 480px) {
    .sm-table tbody td {
      flex-direction: column;
      gap: 0.2rem;
    }

    .sm-table tbody td[data-label]::before {
      min-width: auto;
      max-width: none;
      font-size: 0.72rem;
    }

    .sm-table tbody td {
      padding: 0.45rem 0.85rem;
      font-size: 0.87rem;
    }
  }

  /* ─────────────────────────────────────────────────────────
     HELPER: caption / source
     ───────────────────────────────────────────────────────── */

  .sm-table-caption {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.82rem;
    color: var(--sm-text-muted);
    margin-top: -1.5rem;
    margin-bottom: 2rem;
    padding-left: 0.5rem;
    border-left: 2px solid var(--sm-accent-soft);
  }