/* ── Reset ──────────────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { -webkit-text-size-adjust: 100%; }
    ol, ul { list-style: none; }
    img, svg { display: block; max-width: 100%; }
    button { cursor: pointer; font: inherit; }

    /* ── Design tokens ──────────────────────────────────────────────────── */
    :root {
      color-scheme: light dark;
      --font-serif: "Fraunces", "Newsreader", ui-serif, Georgia, serif;
      --font-sans:  "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
      --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

      --step--2: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
      --step--1: clamp(0.85rem, 0.82rem + 0.14vw, 0.92rem);
      --step-0:  clamp(0.95rem, 0.91rem + 0.2vw,  1.05rem);
      --step-1:  clamp(1.05rem, 1rem + 0.28vw,    1.2rem);
      --step-2:  clamp(1.2rem,  1.1rem + 0.5vw,   1.45rem);
      --step-3:  clamp(1.4rem,  1.22rem + 0.85vw, 1.85rem);
      --step-4:  clamp(1.7rem,  1.4rem + 1.4vw,   2.4rem);
      --step-5:  clamp(2rem,    1.6rem + 1.9vw,   3rem);
      --step-6:  clamp(2.4rem,  1.85rem + 2.6vw,  3.75rem);

      --space-3xs: 0.25rem;
      --space-2xs: 0.5rem;
      --space-xs:  0.75rem;
      --space-s:   1rem;
      --space-m:   1.5rem;
      --space-l:   2.25rem;
      --space-xl:  3.5rem;
      --space-2xl: 5.5rem;
      --space-3xl: 8rem;

      --measure:   64ch;
      --container: 78rem;
      --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
      --duration-fast: 180ms;
      --duration:      320ms;

      --bg:         oklch(99% 0.005 90);
      --bg-subtle:  oklch(98% 0.008 250);
      --ink:        oklch(20% 0.04 260);
      --ink-soft:   oklch(34% 0.035 258);
      --ink-muted:  oklch(50% 0.025 256);
      --ink-faint:  oklch(54% 0.022 254);
      --rule:       oklch(92% 0.015 250);
      --rule-strong: oklch(82% 0.022 250);
      /* Warm jade accent — mahjong-appropriate */
      --accent:        oklch(40% 0.09 160);
      --accent-strong: oklch(28% 0.10 162);
      --selection:     oklch(40% 0.09 160);
      --section-tint:  color-mix(in oklch, var(--accent) 8%, var(--bg));
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --bg:          oklch(15% 0.008 75);
        --bg-subtle:   oklch(18% 0.008 75);
        --ink:         oklch(85% 0.012 80);
        --ink-soft:    oklch(74% 0.014 75);
        --ink-muted:   oklch(65% 0.02 256);
        --ink-faint:   oklch(61% 0.022 254);
        --rule:        oklch(26% 0.008 75);
        --rule-strong: oklch(34% 0.012 70);
        --accent:        oklch(72% 0.10 160);
        --accent-strong: oklch(82% 0.11 160);
        --selection:     oklch(72% 0.10 160);
        --section-tint:  color-mix(in oklch, var(--accent) 9%, var(--bg));
      }
    }

    /* ── Base ───────────────────────────────────────────────────────────── */
    html {
      background: var(--bg);
      color: var(--ink);
      font-family: var(--font-sans);
      font-size: var(--step-0);
      line-height: 1.6;
    }
    body {
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      -webkit-font-smoothing: antialiased;
    }
    main { flex: 1; }
    ::selection { background: var(--selection); color: var(--bg); }
    a { color: inherit; text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
    a:hover { color: var(--accent); }
    hr { border: none; border-top: 1px solid var(--rule); margin-block: var(--space-l); }

    /* ── Layout ─────────────────────────────────────────────────────────── */
    .container {
      width: 100%;
      max-width: var(--container);
      margin-inline: auto;
      padding-inline: clamp(var(--space-s), 4.5vw, var(--space-xl));
    }
    .section {
      padding-block: clamp(var(--space-xl), 6vw, var(--space-3xl));
      border-block-start: 1px solid var(--rule);
    }
    .section:first-of-type { border-block-start: 0; }

    /* ── Nav ────────────────────────────────────────────────────────────── */
    .nav {
      background: linear-gradient(
        180deg,
        color-mix(in oklch, var(--accent) 3%, var(--bg)) 0%,
        var(--bg) 50%,
        color-mix(in oklch, var(--accent) 5%, var(--bg)) 100%
      );
      border-block-end: 1px solid color-mix(in oklch, var(--accent) 24%, var(--rule));
      position: sticky;
      top: 0;
      z-index: 10;
    }
    .nav__row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-block: var(--space-m);
      gap: var(--space-m);
    }
    .nav__brand {
      font-family: var(--font-serif);
      font-size: var(--step-1);
      font-weight: 800;
      color: var(--ink);
      line-height: 1;
    }
    .nav__brand span { color: var(--accent); }
    .nav__list {
      display: flex;
      align-items: center;
      gap: clamp(var(--space-m), 3vw, var(--space-xl));
    }
    .nav__link {
      font-family: var(--font-sans);
      font-size: var(--step--2);
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-soft);
      transition: color var(--duration-fast) var(--ease-out);
    }
    .nav__link:hover { color: var(--accent); }
    @media (max-width: 30rem) { .nav__list { gap: var(--space-s); } }

    /* ── Typography ─────────────────────────────────────────────────────── */
    .display {
      font-family: var(--font-serif);
      font-weight: 800;
      letter-spacing: 0;
      line-height: 1.06;
      color: var(--ink);
      text-wrap: balance;
    }
    .display em {
      font-style: italic;
      font-weight: 700;
      color: var(--accent);
    }
    .display-1 { font-size: var(--step-6); }
    .display-2 { font-size: var(--step-5); line-height: 1.08; }
    .display-3 { font-size: var(--step-4); line-height: 1.1; }
    .display-4 { font-size: var(--step-3); line-height: 1.15; }

    .eyebrow {
      font-family: var(--font-sans);
      font-size: var(--step--2);
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--ink-faint);
      font-weight: 700;
    }
    .eyebrow-num {
      font-family: var(--font-mono);
      font-size: var(--step--2);
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--accent);
      font-weight: 600;
    }

    /* ── Prose ──────────────────────────────────────────────────────────── */
    .prose {
      font-family: var(--font-serif);
      font-size: var(--step-1);
      line-height: 1.65;
      color: var(--ink);
      max-width: var(--measure);
    }
    .prose > * + * { margin-block-start: 1.15em; }
    .prose h2 + p,
    .prose h3 + p { margin-block-start: 0.4em; }

    .prose h2 {
      font-family: var(--font-serif);
      font-size: var(--step-3);
      font-weight: 800;
      line-height: 1.12;
      margin-block-start: 2.4em;
      margin-block-end: 0.4em;
      position: relative;
      padding-block-start: 1.2em;
    }
    .prose h2::before {
      content: "";
      position: absolute;
      top: 0;
      inset-inline-start: 0;
      width: 4em;
      height: 1px;
      background: var(--rule-strong);
    }
    .prose > h2:first-child { padding-block-start: 0; margin-block-start: 0; }
    .prose > h2:first-child::before { display: none; }
    .prose + .prose { margin-block-start: var(--space-2xl); }

    .prose h3 {
      font-family: var(--font-serif);
      font-size: var(--step-2);
      font-weight: 700;
      line-height: 1.2;
      margin-block-start: 1.6em;
      margin-block-end: 0.3em;
    }
    .prose strong { font-weight: 700; color: var(--ink); }
    .prose em { font-style: italic; }

    .prose blockquote {
      font-style: italic;
      font-size: var(--step-1);
      line-height: 1.5;
      padding: var(--space-m) var(--space-l);
      background: color-mix(in oklch, var(--bg-subtle) 60%, transparent);
      border: 1px solid var(--rule);
      border-inline-start: 3px solid var(--accent);
      border-radius: 3px;
      color: var(--ink-soft);
      margin-block: 1.6em;
    }

    .prose ul, .prose ol {
      padding-inline-start: 1.5em;
    }
    .prose ul { list-style: disc; }
    .prose ol { list-style: decimal; }
    .prose li + li { margin-block-start: 0.6em; }

    .prose table {
      width: 100%;
      border-collapse: collapse;
      font-family: var(--font-sans);
      font-size: var(--step--1);
      line-height: 1.45;
      margin-block: 1.8em;
      display: block;
      overflow-x: auto;
      font-variant-numeric: tabular-nums;
    }
    @media (min-width: 48rem) {
      .prose table { display: table; overflow-x: visible; }
    }
    .prose thead { background: color-mix(in oklch, var(--bg-subtle) 80%, transparent); }
    .prose th {
      text-align: start;
      vertical-align: bottom;
      padding: 0.7em 0.9em;
      font-weight: 700;
      color: var(--ink);
      border-block-end: 1px solid var(--rule-strong);
      font-size: var(--step--2);
    }
    .prose td {
      text-align: start;
      vertical-align: top;
      padding: 0.7em 0.9em;
      color: var(--ink-soft);
      border-block-end: 1px solid color-mix(in oklch, var(--rule) 60%, transparent);
    }
    .prose tbody td:first-child { color: var(--ink); font-weight: 600; }
    .prose tbody tr:hover td { background: color-mix(in oklch, var(--bg-subtle) 50%, transparent); }
    .prose tbody tr:last-child td { border-block-end: 0; }

    /* ── Drop cap ───────────────────────────────────────────────────────── */
    .prose.long > p:first-of-type::first-letter {
      font-family: var(--font-serif);
      font-weight: 800;
      font-size: 4.6em;
      line-height: 0.86;
      float: inline-start;
      padding-inline-end: 0.12em;
      padding-block-start: 0.08em;
      color: var(--accent);
      -webkit-initial-letter: 3;
      initial-letter: 3;
    }

    /* ── Hero ───────────────────────────────────────────────────────────── */
    .hero {
      padding-block: clamp(var(--space-xl), 5vw, var(--space-2xl));
      background: linear-gradient(
        180deg,
        color-mix(in oklch, var(--accent) 5%, transparent),
        transparent 42%
      );
    }
    .hero__eyebrow { margin-block-end: var(--space-m); }
    .hero__headline { margin: 0; max-width: 20ch; }
    .hero__lede {
      font-family: var(--font-sans);
      font-size: var(--step-2);
      line-height: 1.35;
      color: var(--ink-soft);
      max-width: 46ch;
      font-weight: 500;
      margin-block-start: var(--space-m);
    }
    .hero__meta {
      display: flex;
      gap: var(--space-m);
      flex-wrap: wrap;
      margin-block-start: var(--space-l);
    }
    .hero__meta-item {
      font-family: var(--font-sans);
      font-size: var(--step--1);
      color: var(--ink-muted);
    }
    .hero__meta-item strong {
      font-weight: 700;
      color: var(--ink-soft);
      display: block;
      font-size: var(--step--2);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-block-end: 0.2em;
    }

    /* ── Tile display ───────────────────────────────────────────────────── */
    .tile-row {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2xs);
      margin-block: var(--space-m);
      align-items: flex-end;
    }
    .tile {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 4.2rem;
      height: 5.6rem;
      border-radius: 6px;
      border: none;
      /* Warm ivory — close to real bone/resin tiles */
      background: linear-gradient(160deg, oklch(97% 0.014 88) 0%, oklch(93% 0.020 82) 100%);
      /* Inset highlights + right/bottom thickness + ambient drop */
      box-shadow:
        inset 0  1px 0 oklch(99% 0.004 90),
        inset -1px 0 0 oklch(86% 0.022 80),
        inset 0 -1px 0 oklch(84% 0.025 78),
        1px 2px 0   oklch(76% 0.030 76),
        2px 4px 0   oklch(70% 0.028 74),
        3px 6px 8px -2px oklch(30% 0.04 260 / 0.22);
      position: relative;
      cursor: default;
      transition: transform var(--duration-fast) var(--ease-out),
                  box-shadow var(--duration-fast) var(--ease-out);
    }
    .tile:hover {
      transform: translate(-1px, -3px);
      box-shadow:
        inset 0  1px 0 oklch(99% 0.004 90),
        inset -1px 0 0 oklch(86% 0.022 80),
        inset 0 -1px 0 oklch(84% 0.025 78),
        2px 3px 0   oklch(76% 0.030 76),
        3px 6px 0   oklch(70% 0.028 74),
        4px 10px 14px -3px oklch(30% 0.04 260 / 0.28);
    }
    .tile__glyph {
      display: block;
      font-size: 2.6rem;
      line-height: 1;
      text-align: center;
      margin-block-start: 0.1rem;
    }
    .tile__label {
      font-family: var(--font-mono);
      font-size: 0.58rem;
      color: oklch(52% 0.025 80);
      letter-spacing: 0.04em;
      margin-block-start: 0.45rem;
      padding-block-end: 0.15rem;
      user-select: none;
    }
    .tile--bamboo .tile__glyph { color: oklch(36% 0.16 148); }
    .tile--character .tile__glyph { color: oklch(44% 0.20 28); }
    .tile--circle .tile__glyph { color: oklch(34% 0.14 256); }
    .tile--wind .tile__glyph { color: oklch(28% 0.05 258); }
    .tile--dragon-red .tile__glyph { color: oklch(48% 0.22 28); }
    .tile--dragon-green .tile__glyph { color: oklch(38% 0.16 148); }
    .tile--dragon-white .tile__glyph { color: oklch(56% 0.06 256); }
    .tile--dragon-red .tile__glyph,
    .tile--dragon-green .tile__glyph,
    .tile--dragon-white .tile__glyph { font-variant-emoji: text; }
    .tile--flower {
      background: linear-gradient(160deg, oklch(97% 0.024 88) 0%, oklch(93% 0.032 80) 100%);
    }
    .tile--flower .tile__glyph { color: oklch(42% 0.16 68); }

    /* ── Tile grid (suit showcase) ──────────────────────────────────────── */
    .suit-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(2.8rem, 1fr));
      gap: var(--space-3xs);
      max-width: 36rem;
      margin-block: var(--space-m);
    }

    /* ── Cards (hand examples) ──────────────────────────────────────────── */
    .hand-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-m);
      margin-block: var(--space-l);
    }
    .hand-card {
      border: 1px solid var(--rule);
      border-radius: 4px;
      padding: var(--space-m);
      background: var(--bg-subtle);
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
    }
    .hand-card__name {
      font-family: var(--font-serif);
      font-size: var(--step-1);
      font-weight: 700;
      color: var(--ink);
    }
    .hand-card__faan {
      font-family: var(--font-mono);
      font-size: var(--step--2);
      color: var(--accent);
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .hand-card__desc {
      font-family: var(--font-sans);
      font-size: var(--step--1);
      color: var(--ink-muted);
      line-height: 1.45;
    }
    .hand-card .tile-row {
      margin-block: var(--space-2xs);
      flex-wrap: nowrap;
      overflow-x: auto;
      padding-block: var(--space-3xs) var(--space-2xs);
      padding-inline-end: var(--space-3xs);
    }
    /* Compact tiles inside example hands so a full 14-tile hand fits one row */
    .hand-card .tile-row { gap: var(--space-3xs); }
    .hand-card .tile { width: 2.6rem; height: 3.5rem; border-radius: 4px; }
    .hand-card .tile__glyph { font-size: 1.6rem; }

    /* ── Phase steps ────────────────────────────────────────────────────── */
    .step-list {
      counter-reset: step;
      display: flex;
      flex-direction: column;
      gap: var(--space-l);
      margin-block: var(--space-l);
    }
    .step {
      display: grid;
      grid-template-columns: 2.5rem 1fr;
      gap: var(--space-m);
      align-items: start;
    }
    .step__num {
      width: 2.5rem;
      height: 2.5rem;
      border: 1px solid color-mix(in oklch, var(--accent) 40%, var(--rule));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-mono);
      font-size: var(--step--1);
      font-weight: 600;
      color: var(--accent);
      flex-shrink: 0;
      background: color-mix(in oklch, var(--accent) 6%, var(--bg));
    }
    .step__body {}
    .step__title {
      font-family: var(--font-serif);
      font-size: var(--step-2);
      font-weight: 700;
      color: var(--ink);
      margin-block-end: var(--space-xs);
    }
    .step__desc {
      font-family: var(--font-sans);
      font-size: var(--step-0);
      color: var(--ink-soft);
      line-height: 1.6;
    }
    .step__desc + .step__desc { margin-block-start: var(--space-xs); }

    /* ── Callout ────────────────────────────────────────────────────────── */
    .callout {
      border: 1px solid var(--rule);
      border-inline-start: 3px solid var(--accent);
      border-radius: 3px;
      padding: var(--space-m) var(--space-l);
      background: color-mix(in oklch, var(--bg-subtle) 60%, transparent);
      font-family: var(--font-sans);
      font-size: var(--step-0);
      color: var(--ink-soft);
      line-height: 1.6;
      margin-block: var(--space-l);
    }
    .callout strong { color: var(--ink); font-weight: 700; }

    /* ── Scoring table legend ───────────────────────────────────────────── */
    .faan-badge {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: var(--step--2);
      font-weight: 700;
      color: var(--accent-strong);
      border: 1px solid color-mix(in oklch, var(--accent) 40%, var(--rule));
      border-radius: 2px;
      padding: 0.15em 0.5em;
      background: color-mix(in oklch, var(--accent) 6%, var(--bg));
      letter-spacing: 0.06em;
    }

    /* ── TOC sidebar ────────────────────────────────────────────────────── */
    .page-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-xl);
      align-items: start;
    }
    @media (min-width: 72rem) {
      .page-layout {
        grid-template-columns: minmax(0, 1fr) 14rem;
      }
    }
    .toc {
      position: sticky;
      top: calc(4rem + var(--space-l));
      font-family: var(--font-sans);
    }
    @media (max-width: 71.99rem) { .toc { display: none; } }
    .toc__label {
      font-size: var(--step--2);
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--ink-faint);
      margin-block-end: var(--space-s);
    }
    .toc__list { display: flex; flex-direction: column; gap: var(--space-2xs); }
    .toc__link {
      font-size: var(--step--1);
      color: var(--ink-muted);
      line-height: 1.35;
      display: block;
      padding-block: 0.15em;
      border-inline-start: 2px solid transparent;
      padding-inline-start: var(--space-xs);
      transition: color var(--duration-fast) var(--ease-out),
                  border-color var(--duration-fast) var(--ease-out);
    }
    .toc__link:hover,
    .toc__link.is-active {
      color: var(--accent);
      border-color: var(--accent);
    }

    /* ── Footer ─────────────────────────────────────────────────────────── */
    .footer {
      border-block-start: 1px solid var(--rule);
      padding-block: var(--space-xl);
      font-family: var(--font-sans);
      font-size: var(--step--2);
      color: var(--ink-faint);
      letter-spacing: 0.05em;
      text-align: center;
    }

    /* ── Scroll reveal ──────────────────────────────────────────────────── */
    .js-reveal [data-reveal] {
      opacity: 0;
      transform: translate3d(0, 14px, 0);
      transition: opacity 540ms var(--ease-out), transform 540ms var(--ease-out);
    }
    .js-reveal [data-reveal].is-revealed {
      opacity: 1;
      transform: none;
    }
    @media (prefers-reduced-motion: reduce) {
      .js-reveal [data-reveal] { transform: none; transition: opacity var(--duration-fast) linear; }
    }

    /* ── Per-page accent themes ─────────────────────────────────────────── */
    body[data-style="hong-kong"] {
      --accent:        oklch(40% 0.09 160);
      --accent-strong: oklch(28% 0.10 162);
      --selection:     oklch(40% 0.09 160);
    }
    body[data-style="classical"] {
      --accent:        oklch(48% 0.13 33);
      --accent-strong: oklch(38% 0.14 33);
      --selection:     oklch(48% 0.13 33);
    }
    @media (prefers-color-scheme: dark) {
      body[data-style="hong-kong"] {
        --accent:        oklch(72% 0.10 160);
        --accent-strong: oklch(82% 0.11 160);
        --selection:     oklch(72% 0.10 160);
      }
      body[data-style="classical"] {
        --accent:        oklch(73% 0.13 38);
        --accent-strong: oklch(83% 0.13 40);
        --selection:     oklch(73% 0.13 38);
      }
    }

    /* ── Active nav link (current page) ─────────────────────────────────── */
    .nav__link.is-active { color: var(--accent); }
    .nav__link.is-active::after {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: -2px;
      height: 1px;
      background: var(--accent);
    }
    .nav__link { position: relative; }

    /* ── Figure / diagram ───────────────────────────────────────────────── */
    .diagram { margin-block: var(--space-xl); }
    .diagram__frame {
      border: 1px solid var(--rule);
      border-radius: 8px;
      background: var(--bg);
      padding: clamp(var(--space-s), 3vw, var(--space-l));
      overflow: hidden;
    }
    .diagram__frame svg { width: 100%; height: auto; display: block; }
    .diagram__caption {
      margin-block-start: var(--space-s);
      font-family: var(--font-sans);
      font-size: var(--step--1);
      color: var(--ink-muted);
      line-height: 1.5;
      max-width: 64ch;
    }
    .diagram__caption strong { color: var(--ink-soft); font-weight: 600; }