/* The site's fonts, served from our own domain. Written by _fonts.mjs: do not edit by hand.
 * build.mjs puts this file at the top of the hashed stylesheet, so these rules are parsed
 * before anything that uses them.
 *
 * All four families are under the SIL Open Font License. The tile characters are a subset of
 * Noto Serif SC holding only 16 characters: 一二三四五六七八九萬東南西北中發
 */
@font-face {
  font-family: "Albert Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/albert-sans-italic-latin-ext.a96fc222.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Albert Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/albert-sans-italic-latin.a31cbeca.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/albert-sans-latin-ext.78b26c5d.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/albert-sans-latin.c2fb6fda.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/albert-sans-latin-ext.78b26c5d.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/albert-sans-latin.c2fb6fda.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/albert-sans-latin-ext.78b26c5d.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/albert-sans-latin.c2fb6fda.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/albert-sans-latin-ext.78b26c5d.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/albert-sans-latin.c2fb6fda.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/caveat-latin-ext.ec90c36c.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/caveat-latin.d51e2283.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Gloock";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/gloock-latin-ext.f4c411c2.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Gloock";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/gloock-latin.9389ada8.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Noto Serif SC";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/noto-serif-sc-tiles.caf5a849.woff2") format("woff2");
  unicode-range: U+4e00, U+4e03, U+4e09, U+4e2d, U+4e5d, U+4e8c, U+4e94, U+516b, U+516d, U+5317, U+5357, U+56db, U+6771, U+767c, U+842c, U+897f;
}

/* Mahjong Tilework. Design E, Hand-Painted, approved by Matt on 2026-09-17: navy line work,
   washes of reed green and vermilion, gold rays, and a guide tile that gets painted step by
   step. Mockup: _mockups/e-hand-painted.html. */

:root {
  --paper: #FBF9F4;
  --paper2: #F2EEE4;
  --navy: #1F2B4D;
  --muted: #5A6174;
  --line: #E1DBCD;
  --reed: #8DB06A;
  --reed-deep: #4C6A2C;
  --vermilion: #C4452F;
  --gold: #C9A45E;
  --gold-deep: #8A6A24;
  --celadon: #DCE8C8;

  /* Tile inks and surfaces */
  --ink-r: #D9624B;
  --ink-g: #8DB06A;
  --ink-b: #1F2B4D;
  --ink-k: #1F2B4D;
  --ink-y: #E0B85E;
  --cane-edge: #3E6B34;
  --cane-wash: #CFE1B6;
  --tile-face: #FFFDF7;
  --tile-edge: #D6CFBE;
  --tile-back: #BCD0A6;
  --sheen: .35;
  --idx-font: "Albert Sans", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--navy); font: 400 1.1875rem/1.68 "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
img { max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: var(--navy); text-decoration-color: var(--vermilion); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--vermilion); }
:focus-visible { outline: 3px solid var(--vermilion); outline-offset: 3px; }
h1, h2, h3 { font-family: "Gloock", Georgia, serif; font-weight: 400; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 10; background: var(--navy); color: #fff; padding: 8px 16px; }
.skip:focus { left: 8px; color: #fff; }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.article { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.draft-flag { background: #FFF1C2; color: #5A4300; border-bottom: 1px solid #E4C766; text-align: center; font-size: 14px; font-weight: 600; line-height: 1.4; padding: 8px 16px; }

/* ------------------------------------------------------------------------------------------
   Tiles
   ------------------------------------------------------------------------------------------ */

.tile { width: var(--tile-w, 40px); height: auto; display: block; flex: none; overflow: visible; }
.tiles { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px var(--set-gap, 12px); }
.tiles .set { display: flex; gap: var(--tile-gap, 3px); }
.t-back { fill: var(--tile-back); }
.t-face { fill: var(--tile-face); stroke: var(--tile-edge); stroke-width: 1; }
.t-backface { fill: var(--tile-back); stroke: var(--tile-edge); stroke-width: 1; }
.t-fill { fill: var(--tile-face); }
.t-faint { opacity: .35; }
.t-sheen { fill: #fff; opacity: var(--sheen, 0); }
.ink-r { fill: var(--ink-r); }
.ink-g { fill: var(--ink-g); }
.ink-b { fill: var(--ink-b); }
.ink-k { fill: var(--ink-k); }
.ink-y { fill: var(--ink-y); }
.cane { stroke: var(--cane-edge); stroke-width: .8px; }
.t-stroke { fill: none; stroke: var(--ink-k); stroke-width: 1.7; stroke-linecap: round; }
.t-green { stroke: var(--ink-g); stroke-width: 2.2; }
.t-soap { fill: none; stroke: var(--ink-b); stroke-width: 3; }
.t-thin { stroke-width: 1.4; }
.t-cjk { font-family: "Noto Serif SC", "SimSun", "Songti SC", serif; font-weight: 700; }
.t-idx { font: 700 9.5px var(--idx-font); fill: var(--ink-r); }
.t-joker { font: 700 10.5px var(--idx-font); letter-spacing: .06em; fill: var(--ink-r); }

/* Hand-painted line work, on shapes only and never on the characters. */
.tile .ink-g, .tile .ink-r, .tile .ink-y, .tile .ink-b { stroke: var(--navy); stroke-width: .75px; }
.tile .ink-g.cane { stroke: var(--cane-edge); stroke-width: .9px; }
.tile text[class] { stroke: none; }

/* The guide's tile, one stage per step: blank, sketch, outline, first wash, painted, finished. */
.tile.stage-0 [class*="ink-"], .tile.stage-0 .t-stroke, .tile.stage-0 .t-fill, .tile.stage-0 .t-idx { display: none; }
.tile.stage-1 [class*="ink-"] { fill: none; stroke: #9AA0AA; stroke-width: .9px; stroke-dasharray: 2.2 1.6; }
.tile.stage-1 .t-stroke { stroke: #9AA0AA; stroke-dasharray: 2.2 1.6; }
.tile.stage-1 .t-fill { display: none; }
.tile.stage-1 .t-idx { fill: #9AA0AA; }
.tile.stage-2 [class*="ink-"] { fill: none; stroke: var(--navy); stroke-width: 1px; }
.tile.stage-2 .t-faint { display: none; }
.tile.stage-3 .ink-g.cane { fill: var(--cane-wash); stroke: var(--navy); stroke-width: 1px; }
.tile.stage-4 .ink-g.cane { stroke: var(--navy); stroke-width: 1px; }
.tile.stage-2 .t-idx, .tile.stage-3 .t-idx, .tile.stage-4 .t-idx { fill: var(--navy); }
.tile.stage-0 .t-sheen, .tile.stage-1 .t-sheen, .tile.stage-2 .t-sheen, .tile.stage-3 .t-sheen, .tile.stage-4 .t-sheen { opacity: 0; }
.tile.stage-5 .t-sheen { opacity: .5; }

.wall-stack { display: inline-block; }
.wall-stack .wall { position: relative; --tile-w: 26px; --tile-gap: 2px; }
.wall-stack .wall:first-child { z-index: 2; }
.wall-stack .wall + .wall { z-index: 1; margin-top: calc(var(--tile-w) * -1.08); }

/* ------------------------------------------------------------------------------------------
   Painted pieces
   ------------------------------------------------------------------------------------------ */

.rays line { stroke: var(--gold); stroke-width: .7px; }
.stage-cap { position: absolute; left: 0; right: 0; bottom: -6px; text-align: center; font: 600 17px/1 "Caveat", cursive; color: var(--vermilion); white-space: nowrap; }
.spec { position: relative; display: grid; place-items: center; width: 96px; height: 96px; margin: 0 auto; }
.spec .rays { position: absolute; inset: 0; width: 100%; height: 100%; }
.spec .tile { --tile-w: 38px; position: relative; }
.spec.big { width: 120px; height: 120px; margin: 0 0 0 -22px; flex: none; }
.spec.big .tile { --tile-w: 50px; }

.plate { position: relative; height: 430px; }
.wash { position: absolute; inset: 0; width: 100%; height: 100%; }
.plate > .rays { position: absolute; left: 52%; top: 50%; width: 380px; height: 380px; transform: translate(-50%, -50%); }
.sprig { position: absolute; left: 0; bottom: 0; width: 150px; height: 310px; }
.sprig .cane { stroke-width: 1.4px; }
.sprig-twig { fill: none; stroke: var(--cane-edge); stroke-width: 1.6; stroke-linecap: round; }
.sprig-leaf { fill: var(--reed); stroke: var(--cane-edge); stroke-width: 1.1; stroke-linejoin: round; }
.sprig-leaf.alt { fill: #A9C98A; }
.plate-tiles { position: absolute; left: 54%; top: 52%; transform: translate(-50%, -50%); display: flex; filter: drop-shadow(0 10px 12px rgba(31, 43, 77, .18)); }
.plate-tiles .tile { --tile-w: 116px; position: relative; }
.plate-tiles .tile:nth-child(1) { transform: rotate(-13deg) translate(30px, 18px); }
.plate-tiles .tile:nth-child(2) { transform: translateY(-12px); z-index: 2; }
.plate-tiles .tile:nth-child(3) { transform: rotate(13deg) translate(-30px, 18px); }
.note-hand { position: absolute; right: 9%; top: 1%; margin: 0; font: 600 25px/1.05 "Caveat", cursive; color: var(--vermilion); transform: rotate(-5deg); text-align: right; }
.hand-arrow { display: block; width: 118px; height: 78px; margin: 2px 0 0 auto; transform: scaleX(-1) rotate(4deg); }
.hand-arrow path { fill: none; stroke: var(--vermilion); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------------------------------
   Header, breadcrumbs, byline, footer
   ------------------------------------------------------------------------------------------ */

.site-head { background: var(--paper); border-bottom: 1px solid var(--line); }
.head-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 14px; padding-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--navy); text-decoration: none; font: 400 25px/1 "Gloock", Georgia, serif; }
.brand:hover { color: var(--navy); }
.brand-mark { position: relative; display: grid; place-items: center; width: 58px; height: 58px; flex: none; }
.brand-mark .rays { position: absolute; inset: 0; width: 58px; height: 58px; }
.brand-mark .tile { --tile-w: 28px; position: relative; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 26px; }
.main-nav a { display: inline-block; padding: 6px 0; color: var(--navy); text-decoration: none; font-size: 15px; font-weight: 500; }
.main-nav a:hover { color: var(--vermilion); }
/* The Where to play strip (design A, approved 2026-09-26): a pale band under the header on
   desktop, in the menu's font and size. On phones it hides and the same link joins the menu. */
.main-nav .nav-strip { display: none; }
.play-strip { background: var(--celadon); }
.play-strip .wrap { display: flex; justify-content: center; padding-top: 7px; padding-bottom: 7px; }
.play-strip a { color: var(--navy); text-decoration: none; font-size: 15px; font-weight: 500; }
.play-strip a:hover { color: var(--vermilion); }
.strip-dot { display: inline-block; width: 7px; height: 7px; margin: 0 5px 2px; border-radius: 50%; background: var(--reed-deep); vertical-align: middle; }
/* No line or accent under the current menu item (Matt's rule for all his sites, 2026-09-17: on
   a phone they read like spelling errors). The breadcrumb shows where you are, and
   aria-current still tells screen readers. */

.crumbs { margin: 0; padding-top: 22px; font-size: 14px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.hero .crumbs { padding-top: 0; margin: 0 0 22px; }
.byline { margin: 14px 0 0; font-size: 15px; color: var(--muted); }
.byline a { color: var(--navy); font-weight: 600; }

.site-foot { background: var(--paper2); color: var(--muted); font-size: 15px; border-top: 1px solid var(--gold); }
.foot-grid { display: grid; gap: 14px; padding-top: 40px; padding-bottom: 40px; }
.foot-brand { font: 400 26px/1.1 "Gloock", Georgia, serif; color: var(--navy); text-decoration: none; }
.foot-id p { margin: 4px 0 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-foot a { color: var(--navy); }
.fine { margin: 0; font-size: 13px; }

/* ------------------------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------------------------ */

.hero { overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; padding-top: 34px; padding-bottom: 30px; }
.kicker { margin: 0 0 6px; font: 600 25px/1 "Caveat", cursive; color: var(--reed-deep); }
.hero h1 { margin: 0; font-size: 70px; line-height: 1; }
.dek { margin: 18px 0 0; font-size: 21px; color: var(--muted); max-width: 520px; }
.facts { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.facts b { font: 400 22px/1 "Gloock", Georgia, serif; color: var(--vermilion); letter-spacing: 0; margin-right: 3px; }
.go { display: inline-block; margin-top: 26px; padding: 12px 22px; border: 1.5px solid var(--navy); background: #fff; color: var(--navy); font-weight: 600; text-decoration: none; }
.go:hover { background: var(--navy); color: #fff; }

/* ------------------------------------------------------------------------------------------
   Guide pages
   ------------------------------------------------------------------------------------------ */

main { padding: 40px 0 70px; }
.note { position: relative; margin: 0 0 54px; padding: 22px 26px 22px 96px; background: #fff; border: 1px solid var(--navy); }
.note > .note-tile { position: absolute; left: 24px; top: -16px; --tile-w: 50px; transform: rotate(-7deg); }
.note-label { margin: 0 0 6px; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; color: var(--vermilion); }
.note p { margin: 0; }
.note p + p { margin-top: 6px; }

.contents { margin: 0 0 60px; }
.contents h2 { margin: 0 0 6px; text-align: center; font-size: 30px; }
.contents ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.contents a { display: block; text-align: center; text-decoration: none; color: var(--navy); }
.contents a:hover .spec-t { text-decoration: underline; text-decoration-color: var(--vermilion); }
/* The home page puts the hands hub's cards inside a .contents block, so its centered, unlined
   links would otherwise reach the card titles. Give those titles back the hub's look. */
.contents .hand-card a { display: inline; text-align: left; text-decoration: underline var(--vermilion) 1.5px; }
.spec-n { display: block; font: 400 24px/1 "Gloock", Georgia, serif; color: var(--vermilion); }
.spec-t { display: block; margin-top: 4px; font-size: 15px; line-height: 1.3; font-weight: 500; }

.step { margin: 0 0 66px; }
.step-head { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.num { margin: 0 0 4px; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; color: var(--vermilion); }
.step h2 { margin: 0; font-size: 44px; line-height: 1.04; }
.tag { display: inline-block; margin-left: 10px; padding: 2px 6px 1px; border: 1px solid var(--reed-deep); color: var(--reed-deep); letter-spacing: .12em; font-size: 11px; vertical-align: 1px; }

.families { margin: 22px 0 8px; }
.family { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 8px 22px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.family h3 { margin: 0; font-size: 25px; line-height: 1.1; }
.family p { margin: 3px 0 0; font-size: 15px; color: var(--muted); line-height: 1.45; }
.family .tiles { --tile-w: 36px; }

table.count { border-collapse: collapse; width: 100%; margin: 30px 0 8px; }
table.count caption { text-align: left; font: 400 24px/1.2 "Gloock", Georgia, serif; padding-bottom: 8px; }
table.count th, table.count td { text-align: left; padding: 9px 0; vertical-align: top; border-top: 1px solid var(--line); font-weight: 400; }
table.count td { text-align: right; font: 400 20px/1.3 "Gloock", Georgia, serif; font-variant-numeric: tabular-nums; }
table.count tr.total th, table.count tr.total td { border-top: 2px solid var(--gold); font-weight: 600; color: var(--vermilion); }

.aside { font-size: 16px; color: var(--muted); }
.step figure { margin: 24px 0; }
figcaption { font-size: 15px; color: var(--muted); margin-top: 6px; }

.passes { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 0; }
.passes li { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); }
.pass-name { min-width: 190px; font-weight: 600; }
.arrow { font: 600 36px/1 "Caveat", cursive; color: var(--vermilion); }
.rule { font-weight: 600; color: var(--vermilion); }

.turn { display: flex; align-items: center; gap: 22px; margin: 22px 0; }
.turn .step-tile { --tile-w: 54px; }
.turn figure { margin: 0; }
.then { font: 600 32px/1 "Caveat", cursive; color: var(--reed-deep); }

.sets { display: flex; flex-wrap: wrap; gap: 22px 34px; margin: 22px 0; }
.sets figure { margin: 0; }
.sets .tiles { --tile-w: 40px; }
.sets b { display: block; font: 400 24px/1.2 "Gloock", Georgia, serif; color: var(--navy); }
.sets figcaption { max-width: 220px; }

.step figure.win-figure { padding: 30px 20px 18px; background: radial-gradient(ellipse at 50% 45%, var(--celadon) 0%, rgba(220, 232, 200, .45) 45%, rgba(220, 232, 200, 0) 72%); }
.win { --tile-w: 42px; --set-gap: 14px; justify-content: center; }
.win-figure figcaption { text-align: center; }

.ad { margin: 8px 0 56px; text-align: center; }
.ad small { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.sources { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--navy); font-size: 16px; color: var(--muted); }
.sources h2 { margin: 0 0 10px; font-size: 28px; line-height: 1.1; color: var(--navy); }
.sources a { color: var(--navy); }
.faq { margin-top: 20px; }
.faq h2 { margin: 0 0 12px; font-size: 34px; }
.faq details { padding: 14px 0; border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font: 400 22px/1.35 "Gloock", Georgia, serif; }
.faq details p { margin: 10px 0 0; color: #3B4460; }

/* ------------------------------------------------------------------------------------------
   Rules page (/mahjong-rules/). Approved by Matt on 2026-09-17 from the mockup
   (_mockups/rules-page.html, drawn by _mockups/_rules.mjs).
   ------------------------------------------------------------------------------------------ */

/* Style tags. The words name the style; the color only repeats it. */
.style { display: inline-block; padding: 2px 6px 1px; border: 1px solid currentColor; font: 600 11px/1.4 "Albert Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; vertical-align: 2px; }
.style-am { color: var(--reed-deep); }
.style-hk { color: var(--vermilion); }
/* The glossary tags four styles rather than the rules page's two. Both new colors are from the
   existing palette's range and clear 4.5:1 on paper at this size. */
.style-cn { color: var(--navy); }
.style-jp { color: var(--gold-deep); }
.style + .style { margin-left: 4px; }
.legend { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 15px; color: var(--muted); }
.legend span.style { vertical-align: 0; }

/* A heading's tags (and a rule's own link) travel together: beside the heading on wide screens,
   on a line of their own on phones. */
.tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: 10px; vertical-align: 4px; }
.tags .style { margin: 0; vertical-align: 0; }
.num .tags { vertical-align: 0; }
.num .tags .style { font-size: 10px; }

/* A way into the guide for new players. */
.to-guide { display: flex; align-items: center; gap: 16px; margin: 0 0 56px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.to-guide .spec { width: 74px; height: 74px; margin: 0; flex: none; }
.to-guide .spec .tile { --tile-w: 30px; }
.to-guide p { margin: 0; font-size: 17px; }

/* Contents: eight sections, each with its own tile in rays. */
.contents.parts ol { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 18px; }

/* The rules card: the short version, framed like a printed card. */
.glance { margin: 0 0 70px; padding: 28px 32px 22px; background: #fff; border: 1px solid var(--navy); outline: 1px solid var(--gold); outline-offset: -8px; scroll-margin-top: 16px; }
.glance-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.glance h2 { margin: 0; font-size: 36px; line-height: 1.1; }
.glance-head p { margin: 0; font: 600 23px/1 "Caveat", cursive; color: var(--reed-deep); }
.glance-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 36px; margin-top: 12px; }
.glance-group { margin: 14px 0 6px; }
.glance-group .style { font-size: 10px; }
.glance ol { list-style: none; counter-reset: glance; margin: 0; padding: 0; }
.glance li { counter-increment: glance; position: relative; padding: 9px 0 9px 38px; border-top: 1px solid var(--line); font-size: 16.5px; line-height: 1.45; }
.glance li::before { content: counter(glance); position: absolute; left: 0; top: 6px; width: 28px; text-align: center; font: 400 26px/1 "Gloock", Georgia, serif; color: var(--vermilion); }

/* Sections. The first sentence of each is its rule. */
.part { margin: 0 0 76px; scroll-margin-top: 16px; }
.part-head { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.part h2 { margin: 0; font-size: 44px; line-height: 1.04; }
.lead { margin: 0 0 18px; font-size: 21px; line-height: 1.5; font-weight: 600; }

/* Rule entries, each with its own link to share. */
/* The glossary. Built on the same hairline rhythm as .rule-item, but tighter, because an entry
   is a sentence rather than a section. Each dt carries an id so any page can link a word. */
.terms { margin: 22px 0 0; }
.terms dt { padding-top: 14px; border-top: 1px solid var(--line); font: 400 22px/1.2 "Gloock", Georgia, serif; color: var(--navy); scroll-margin-top: 16px; }
.terms dt .style { margin-left: 6px; vertical-align: 4px; }
.terms dd { margin: 5px 0 14px; color: var(--muted); }
.terms dd a { color: var(--navy); }

.rule-item { padding: 20px 0 4px; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.rule-item h3 { margin: 0 0 8px; font-size: 27px; line-height: 1.15; }
.rule-item p { margin: 0 0 14px; }
.rule-item > ul { margin: 0 0 14px; padding-left: 22px; }
.rule-item > ul li + li { margin-top: 4px; }
.rule-item > ul li::marker { color: var(--vermilion); }
.here { margin-left: 2px; font: 500 21px/1 "Albert Sans", sans-serif; color: var(--gold); text-decoration: none; opacity: 0; }
.rule-item:hover .here, .here:focus-visible { opacity: 1; }
@media (hover: none) { .here { opacity: .75; } }

/* The tile chart: every suit tile by number, then the named tiles. */
.chart { margin: 26px 0 12px; padding: 24px 24px 20px; background: #fff; border: 1px solid var(--line); }
.chart-grid { display: grid; grid-template-columns: 82px repeat(9, minmax(0, 1fr)); gap: 10px 6px; align-items: center; }
.chart-grid .tile { width: 100%; max-width: 46px; justify-self: center; }
.chart-col { text-align: center; font: 400 21px/1 "Gloock", Georgia, serif; color: var(--vermilion); }
.chart-row { font: 400 22px/1.1 "Gloock", Georgia, serif; }
.chart-named { list-style: none; margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px 10px; }
.chart-named li { text-align: center; font-size: 14px; line-height: 1.3; }
.chart-named .tile { --tile-w: 46px; margin: 0 auto 7px; }
.chart-named b { display: block; font-weight: 600; font-size: 15px; }
.chart figcaption { margin-top: 16px; }

/* Sets, each with the styles that use it. */
.set-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 22px; margin: 24px 0; }
.set-list figure { margin: 0; }
.set-list .tiles { --tile-w: 34px; --tile-gap: 2px; min-height: 48px; }
.set-list b { display: block; margin-top: 6px; font: 400 25px/1.15 "Gloock", Georgia, serif; }
.set-list .style { margin: 4px 4px 0 0; font-size: 10px; }
.set-list figcaption { margin-top: 2px; }

/* Winning hands, style by style. */
.win-row { display: grid; gap: 18px; margin: 24px 0; }
.win-card { margin: 0; padding: 20px 22px 16px; background: #fff; border: 1px solid var(--line); display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 6px 24px; align-items: start; }
.win-card h3 { grid-column: 1 / -1; margin: 0 0 10px; font: 400 22px/1.2 "Gloock", Georgia, serif; }
.win-card p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--navy); }
.win-card p:first-of-type { margin-top: 0; }
.win-card .tiles { --tile-w: 30px; --tile-gap: 1px; --set-gap: 10px; grid-column: 1 / -1; margin-bottom: 6px; }
.win-card .tiles + p { grid-column: 1 / -1; }

/* A sketch of how the card sets out a hand: groups of tiles in up to three colors, then X or C
   and a value. Not a real hand, and labeled so, because we never reprint the card. */
.card-demo { position: relative; margin: 0; padding: 16px 16px 34px; background: var(--paper); border: 1px solid var(--navy); display: grid; gap: 12px; }
.cd-row { display: flex; align-items: center; gap: 6px; }
.cd-row i { display: block; height: 11px; border-radius: 3px; }
.cd-row i.g { background: var(--reed); }
.cd-row i.r { background: var(--ink-r); }
.cd-row i.b { background: var(--navy); }
.cd-row i.w1 { width: 12px; }
.cd-row i.w2 { width: 24px; }
.cd-row i.w3 { width: 34px; }
.cd-row i.w4 { width: 46px; }
.cd-row b { display: grid; place-items: center; width: 22px; height: 20px; border: 1px solid var(--muted); font: 600 12px/1 "Albert Sans", sans-serif; color: var(--navy); }
.cd-row b:first-of-type { margin-left: auto; }
.cd-row b + b { border-color: transparent; font: 400 16px/1 "Gloock", Georgia, serif; color: var(--vermilion); }
.cd-note { position: absolute; right: 12px; bottom: 6px; margin: 0; font: 600 18px/1 "Caveat", cursive; color: var(--vermilion); }

/* The table, from above: seats and the direction of play. */
.seats { margin: 26px 0; }
.seat-table { display: grid; grid-template-columns: 1fr 200px 1fr; grid-template-rows: auto 200px auto; grid-template-areas: ". w ." "n t s" ". e ."; gap: 8px 12px; align-items: center; justify-items: center; max-width: 520px; margin: 0 auto; }
.seat { display: grid; justify-items: center; gap: 2px; text-align: center; font-size: 14px; line-height: 1.25; }
.seat .tile { --tile-w: 38px; margin-bottom: 4px; }
.seat b { font: 400 21px/1.1 "Gloock", Georgia, serif; }
.seat i { font: 600 20px/1 "Caveat", cursive; color: var(--vermilion); }
.seat-w { grid-area: w; }
.seat-n { grid-area: n; }
.seat-s { grid-area: s; }
.seat-e { grid-area: e; }
.board { grid-area: t; position: relative; width: 200px; height: 200px; background: var(--celadon); border: 1px solid var(--reed-deep); }
.board::before { content: ""; position: absolute; inset: 14px; border: 1px dashed rgba(76, 106, 44, .45); }
.board svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.board .arc { fill: none; stroke: var(--vermilion); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.board text { font: 600 17px "Caveat", cursive; fill: var(--vermilion); }
.seats figcaption { max-width: 520px; margin: 14px auto 0; text-align: center; }

/* Allowed and not allowed. The words carry the meaning; the marks repeat it. */
.verdicts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 22px 0 26px; }
.verdict { margin: 0; padding: 16px 18px 14px; background: #fff; border: 1px solid var(--line); }
.verdict.no { border-color: #E8CBC2; }
.verdict .tiles { --tile-w: 36px; --tile-gap: 2px; min-height: 50px; }
.verdict figcaption { margin-top: 10px; font-size: 15.5px; line-height: 1.45; color: var(--navy); }
.verdict b { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; font: 600 27px/1 "Caveat", cursive; }
.verdict.yes b { color: var(--reed-deep); }
.verdict.no b { color: var(--vermilion); }
.verdict b::before { content: ""; flex: none; width: 24px; height: 22px; background: no-repeat center / contain; }
.verdict.yes b::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M3 12.5 C5.5 14 7.5 16.5 9 19 C12 12 16 6.5 21.5 2.5' fill='none' stroke='%234C6A2C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.verdict.no b::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M4.5 3.5 C9 8 14 13.5 19.5 19 M19 3 C14 7.5 9.5 13 5 19.5' fill='none' stroke='%23C4452F' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* The order of claims when two players want the same discard. */
.claim-order { list-style: none; counter-reset: claim; margin: 22px 0 24px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.claim-order li { counter-increment: claim; position: relative; padding: 16px 16px 14px; background: #fff; border: 1px solid var(--line); font-size: 15.5px; line-height: 1.45; }
.claim-order li::before { content: counter(claim); position: absolute; right: 14px; top: 8px; font: 400 34px/1 "Gloock", Georgia, serif; color: var(--gold); }
.claim-order .tiles { --tile-w: 26px; --tile-gap: 1px; margin-bottom: 10px; min-height: 36px; }
.claim-order b { display: block; font: 400 22px/1.2 "Gloock", Georgia, serif; }
.claim-order .style { margin-top: 6px; font-size: 10px; }

/* Tile counts, and paying the winner as scoring chips (how many times the hand's value each
   player pays). */
table.pay { width: 100%; border-collapse: collapse; margin: 22px 0 12px; font-size: 16px; line-height: 1.4; }
table.pay caption { text-align: left; font: 400 24px/1.2 "Gloock", Georgia, serif; padding-bottom: 8px; }
table.pay th, table.pay td { padding: 10px 12px 10px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; }
table.pay thead th { border-top: 0; font-weight: 600; color: var(--muted); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
table.pay td.x { font: 400 22px/1.1 "Gloock", Georgia, serif; color: var(--vermilion); white-space: nowrap; }
.pay-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 20px 0 16px; }
.pay-card { margin: 0; padding: 16px 18px; background: #fff; border: 1px solid var(--line); }
.pay-card figcaption { margin: 0 0 12px; font: 400 22px/1.2 "Gloock", Georgia, serif; color: var(--navy); }
.chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; font-size: 14px; line-height: 1.3; color: var(--muted); }
.chip b { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 6px; border-radius: 50%; border: 2px solid var(--navy); box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 6px var(--navy); font: 400 24px/1 "Gloock", Georgia, serif; color: var(--navy); }
.chip.double b { border-color: var(--vermilion); box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 6px var(--vermilion); color: var(--vermilion); background: #FFF6F2; }
.chip b span { display: flex; align-items: baseline; }
.chip b i { font: 500 17px/1 "Albert Sans", sans-serif; font-style: normal; margin-left: 1px; }

/* How the styles differ: a table wider than the text column on wide screens; on phones each row
   stacks, style by style. */
.wide { position: relative; left: 50%; width: min(1060px, calc(100vw - 48px)); transform: translateX(-50%); }
table.compare { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 26px 0 12px; font-size: 15.5px; line-height: 1.42; }
table.compare caption { text-align: left; font: 400 26px/1.2 "Gloock", Georgia, serif; padding-bottom: 12px; }
table.compare th, table.compare td { padding: 11px 12px 11px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; }
table.compare thead td { width: 16%; border-top: 0; }
table.compare thead th { border-top: 0; vertical-align: bottom; padding-bottom: 12px; font: 400 20px/1.15 "Gloock", Georgia, serif; }
table.compare thead .tile { --tile-w: 36px; margin-bottom: 8px; }
table.compare tbody th { font-weight: 600; }
table.compare tbody tr:last-child th, table.compare tbody tr:last-child td { border-bottom: 2px solid var(--gold); }
table.compare .big { display: block; font: 400 24px/1 "Gloock", Georgia, serif; color: var(--vermilion); }

/* ------------------------------------------------------------------------------------------
   American mahjong page (/american-mahjong/). Approved by Matt on 2026-09-17 from the mockup
   (_mockups/american-mahjong-page.html, drawn by _mockups/_page.mjs). Everything else on that
   page reuses the rules page's parts above.
   ------------------------------------------------------------------------------------------ */

/* One line of the card, invented, with a numbered key underneath. We never reprint the card. */
.card-line { position: relative; margin: 22px 0 18px; padding: 22px 24px 18px; background: #fff; border: 1px solid var(--line); }
.cl-line { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 18px; font: 400 40px/1 "Gloock", Georgia, serif; letter-spacing: .04em; }
.cl-part, .cl-mark, .cl-value { display: inline-flex; align-items: flex-start; }
.cl-blue { color: var(--navy); }
.cl-green { color: var(--reed-deep); }
.cl-red { color: var(--vermilion); }
.cl-mark { margin-left: auto; padding: 0 10px; border: 2px solid var(--navy); font-size: 30px; color: var(--navy); }
.cl-value { font-size: 30px; color: var(--muted); }
.cl-line b { flex: none; display: grid; place-items: center; width: 19px; height: 19px; margin: -4px 0 0 4px; border-radius: 50%; background: var(--gold); color: #fff; font: 600 12px/1 "Albert Sans", sans-serif; letter-spacing: 0; }
.cl-note { margin: 8px 0 0; text-align: right; font: 600 19px/1 "Caveat", cursive; color: var(--vermilion); }
.cl-key { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; font-size: 15.5px; line-height: 1.45; }
.cl-key li { display: flex; gap: 10px; align-items: flex-start; }
.cl-key > li > b { flex: none; display: grid; place-items: center; width: 21px; height: 21px; margin-top: 1px; border-radius: 50%; background: var(--gold); color: #fff; font: 600 12px/1 "Albert Sans", sans-serif; }
.cl-t { font-weight: 600; }

/* The card's sections. The first selector beats the rules page's list styling, which would
   otherwise indent this grid and space its rows apart. */
.rule-item > .sections-list { list-style: none; margin: 14px 0 16px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sections-list li { padding: 9px 12px; background: #fff; border: 1px solid var(--line); font-size: 16px; }
.sections-list li + li { margin-top: 0; }
.sections-list li::marker { content: none; }

/* The joker's label sits low on its tile, and the middle tile of the hero fan would cover it,
   so this page's fan spreads a little wider. The sharing card does the same. */
.page-american-mahjong .plate-tiles .tile:nth-child(1),
.page-mahjong-sets .plate-tiles .tile:nth-child(1) { transform: rotate(-14deg) translate(14px, 22px); }
.page-american-mahjong .plate-tiles .tile:nth-child(3),
.page-mahjong-sets .plate-tiles .tile:nth-child(3) { transform: rotate(14deg) translate(-14px, 22px); }

/* The three Charleston passes, each seen from above. */
.passes-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 26px 0 22px; }
.pass-fig { margin: 0; text-align: center; }
.pass-board { position: relative; width: 100%; max-width: 186px; aspect-ratio: 1; margin: 0 auto; background: var(--celadon); border: 1px solid var(--reed-deep); }
.pass-board::before { content: ""; position: absolute; inset: 12px; border: 1px dashed rgba(76, 106, 44, .45); }
.pass-board svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pass-board .arc { fill: none; stroke: var(--vermilion); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pass-fig figcaption { margin-top: 10px; }
.pass-fig figcaption b { display: block; font: 400 21px/1.2 "Gloock", Georgia, serif; color: var(--navy); }

/* The printable sheet. */
.sheet-offer { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 26px; align-items: start; margin: 22px 0 10px; }
.sheet-thumb { display: block; border: 1px solid var(--line); background: #fff; box-shadow: 0 10px 20px rgba(31, 43, 77, .12); }
.sheet-thumb img { display: block; width: 100%; height: auto; }
.sheet-offer p { margin: 0 0 14px; }
.sheet-offer .go { margin-top: 0; }
.sheet-offer .aside { margin-bottom: 0; }

/* Links onward to the rules page. */
.more-list { margin: 16px 0 0; padding-left: 22px; }
.more-list li + li { margin-top: 8px; }
.more-list li::marker { color: var(--vermilion); }

/* ------------------------------------------------------------------------------------------
   Two-player page (/two-player-mahjong/). Approved by Matt on 2026-09-17 from the mockup
   (_mockups/two-player-mahjong-page.html). It reuses the parts above, so only three pieces are
   its own.
   ------------------------------------------------------------------------------------------ */

/* Two players at a table that still has four walls. */
.seat-empty { font: 600 19px/1.2 "Caveat", cursive; color: var(--muted); text-align: center; }
.board .wall { fill: var(--tile-back); stroke: var(--cane-edge); stroke-width: 1px; }

/* The comparison table with two styles instead of four: the row headings can take more room. */
table.compare.two-up thead td { width: 24%; }

/* ------------------------------------------------------------------------------------------
   Chinese and Hong Kong page (/chinese-mahjong/). Approved by Matt on 2026-09-17 from the mockup
   (_mockups/chinese-mahjong-page.html). Two new pieces, and two fixes the rules pages needed.
   ------------------------------------------------------------------------------------------ */

/* The styles behind the name: one card each, each its own height, because the sources say more
   about some styles than others and a padded card would be a lie about that. Two columns that
   pack rather than a grid, so a short card leaves no hole under it. */
.variants { columns: 2; column-gap: 16px; margin: 26px 0 24px; }
.variant { break-inside: avoid; margin: 0 0 16px; padding: 20px 22px 18px; background: #fff; border: 1px solid var(--line); }
.variant h3 { margin: 0 0 10px; font: 400 27px/1.1 "Gloock", Georgia, serif; }
.variant h3 span { display: block; margin-top: 5px; font: 400 15px/1.3 "Albert Sans", sans-serif; color: var(--muted); }
.variant > p { margin: 0; font-size: 15.5px; line-height: 1.5; }
.variant ul { list-style: none; margin: 14px 0 0; padding: 0; }
.variant li { padding: 9px 0; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.4; }
.variant li b { display: block; margin-bottom: 1px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--vermilion); }

/* What a table settles before the first hand. */
.agree { list-style: none; counter-reset: agree; margin: 26px 0 20px; padding: 0; }
.agree li { counter-increment: agree; position: relative; padding: 14px 0 14px 48px; border-top: 1px solid var(--line); font-size: 16.5px; line-height: 1.5; }
.agree li:last-child { border-bottom: 1px solid var(--line); }
.agree li::before { content: counter(agree); position: absolute; left: 0; top: 12px; width: 34px; text-align: center; font: 400 28px/1 "Gloock", Georgia, serif; color: var(--gold); }
.agree b { display: block; font: 400 22px/1.2 "Gloock", Georgia, serif; }

/* Figures inside a rules section: every figure margin is zeroed above and only the guide's
   .step puts it back. Kept to this page on purpose: the rules and American pages are live and
   their figures carry their own margins, so a general rule here would shift them. The winning
   hand's glow was written for .step too, and is borrowed the same way. */
.page-chinese-mahjong .rule-item > figure, .page-chinese-mahjong .part > figure.win-figure,
.page-mahjong-sets .part > figure { margin: 24px 0; }
.page-chinese-mahjong figure.win-figure { padding: 30px 20px 18px; background: radial-gradient(ellipse at 50% 45%, var(--celadon) 0%, rgba(220, 232, 200, .45) 45%, rgba(220, 232, 200, 0) 72%); }

/* Four groups across, where the rules page's list wants three. */
.set-list.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 16px; }
.set-list.four .tiles { --tile-w: 31px; }

/* ------------------------------------------------------------------------------------------
   Plain pages: about, contact, privacy, not found
   ------------------------------------------------------------------------------------------ */

.plain h1 { margin: 0 0 18px; font-size: 52px; line-height: 1.02; }
.plain h2 { margin: 38px 0 8px; font-size: 30px; line-height: 1.1; }
.plain li + li { margin-top: 6px; }
.updated { font-size: 15px; color: var(--muted); }
.notfound { text-align: center; }
.notfound .tiles { justify-content: center; margin: 0 0 22px; --tile-w: 52px; }

/* ------------------------------------------------------------------------------------------
   Phones
   ------------------------------------------------------------------------------------------ */

@media (max-width: 760px) {
  .wrap, .article { padding-left: 18px; padding-right: 18px; }
  .head-bar { flex-direction: column; align-items: flex-start; gap: 6px; }
  .main-nav { width: 100%; }
  .main-nav ul { column-gap: 18px; }
  .main-nav li { flex: none; }
  .main-nav a { white-space: nowrap; }
  .main-nav .nav-strip { display: list-item; }
  .play-strip { display: none; }
  .brand { font-size: 23px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); padding-top: 22px; padding-bottom: 10px; }
  .hero h1 { font-size: 48px; }
  .dek { font-size: 19px; }
  .plate { height: 300px; margin: 0 -18px; }
  .plate > .rays { width: 280px; height: 280px; }
  .plate-tiles .tile { --tile-w: 80px; }
  .plate-tiles .tile:nth-child(1) { transform: rotate(-13deg) translate(20px, 12px); }
  .plate-tiles .tile:nth-child(3) { transform: rotate(13deg) translate(-20px, 12px); }
  .sprig { width: 96px; height: 200px; }
  .note-hand { font-size: 20px; right: 5%; top: 0; }
  .hand-arrow { width: 70px; height: 46px; }
  .note { padding: 24px 18px 18px 18px; margin-top: 20px; }
  .note > .note-tile { left: auto; right: 16px; top: -22px; --tile-w: 40px; }
  .contents ol { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .spec { width: 80px; height: 80px; }
  .spec .tile { --tile-w: 32px; }
  .step-head { gap: 6px; }
  .spec.big { width: 92px; height: 92px; margin-left: -14px; }
  .spec.big .tile { --tile-w: 38px; }
  .step h2 { font-size: 32px; }
  .family { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .family .tiles { --tile-w: 31px; --tile-gap: 2px; }
  .pass-name { min-width: 0; width: 100%; }
  .win { --tile-w: 30px; --set-gap: 10px; --tile-gap: 2px; }
  .wall-stack .wall { --tile-w: 15px; --tile-gap: 1px; }
  .plain h1 { font-size: 40px; }

  /* Rules page */
  .contents.parts ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glance { padding: 20px 18px 16px; outline-offset: -6px; margin-left: -4px; margin-right: -4px; }
  .glance h2 { font-size: 30px; }
  .glance-cols { grid-template-columns: minmax(0, 1fr); }
  .part h2 { font-size: 32px; }
  .lead { font-size: 19px; }
  .rule-item h3 { font-size: 23px; }
  .rule-item h3 .tags, .num .tags { display: flex; margin: 6px 0 0; }
  .chart { padding: 16px 10px 14px; margin-left: -8px; margin-right: -8px; }
  .chart-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px 3px; }
  .chart-corner, .chart-col { display: none; }
  .chart-row { grid-column: 1 / -1; margin-top: 8px; font-size: 19px; }
  .chart-named { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 6px; }
  .chart-named .tile { --tile-w: 38px; }
  .set-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .set-list .tiles { --tile-w: 27px; }
  .win-card { grid-template-columns: minmax(0, 1fr); padding: 16px 14px 12px; }
  .win-card .tiles { --tile-w: 17px; --set-gap: 7px; }
  .verdicts, .claim-order, .pay-cards { grid-template-columns: minmax(0, 1fr); }
  .chip b { width: 56px; height: 56px; font-size: 21px; }
  .seat-table { grid-template-columns: 1fr 150px 1fr; grid-template-rows: auto 150px auto; gap: 6px; }
  .board { width: 150px; height: 150px; }
  .seat .tile { --tile-w: 32px; }
  .wide { left: auto; width: auto; transform: none; }
  table.compare, table.compare tbody, table.compare tr, table.compare th, table.compare td, table.compare caption { display: block; }
  table.compare thead { display: none; }
  table.compare tbody tr { padding: 12px 0 8px; border-top: 2px solid var(--gold); }
  table.compare tbody th { padding: 0 0 6px; border: 0; font: 400 22px/1.2 "Gloock", Georgia, serif; }
  table.compare td { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 10px; padding: 5px 0; border: 0; }
  table.compare td::before { content: attr(data-style); font-weight: 600; color: var(--muted); }
  table.compare tbody tr:last-child th, table.compare tbody tr:last-child td { border-bottom: 0; }
  table.compare .big { display: inline; font-size: 21px; }

  /* American mahjong page */
  .card-line { padding: 16px 14px 14px; margin-left: -6px; margin-right: -6px; }
  .cl-line { font-size: 31px; gap: 8px 12px; }
  .cl-mark, .cl-value { font-size: 24px; }
  .cl-key { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rule-item > .sections-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-american-mahjong .plate-tiles .tile:nth-child(1),
  .page-mahjong-sets .plate-tiles .tile:nth-child(1) { transform: rotate(-14deg) translate(10px, 14px); }
  .page-american-mahjong .plate-tiles .tile:nth-child(3),
  .page-mahjong-sets .plate-tiles .tile:nth-child(3) { transform: rotate(14deg) translate(-10px, 14px); }
  .passes-row { gap: 10px; }
  .pass-fig figcaption { font-size: 14px; }
  .pass-fig figcaption b { font-size: 17px; }
  .sheet-offer { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .sheet-thumb { max-width: 260px; }

  /* Two-player page */
  .seat-empty { font-size: 16px; }

  /* Chinese page */
  .variants { columns: 1; }
  .variant { padding: 18px 16px 14px; }
  .variant h3 { font-size: 24px; }
  .set-list.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .set-list.four .tiles { --tile-w: 27px; }
  .agree li { padding-left: 40px; font-size: 16px; }
  .agree li::before { font-size: 25px; top: 13px; width: 28px; }
  .agree b { font-size: 20px; }
}

@media print {
  .site-head nav, .play-strip, .ad, .skip, .plate { display: none; }
  body { background: #fff; }
  .wide { left: auto; width: auto; transform: none; }
}

/* ------------------------------------------------------------------------------------------
   Named hands (/mahjong-hands/ and the pages under it). Approved by Matt on 2026-09-20 from the
   mockup (_mockups/hands.css). Short pages, so the headings match the About and Privacy pages
   rather than the numbered section heads of the rules pages, and everything else is reused.
   ------------------------------------------------------------------------------------------ */

.hand h2, .hub h2 { margin: 42px 0 10px; font-size: 30px; line-height: 1.12; }
.hand .lead, .hub .lead { margin: 0 0 16px; }

/* The drawn hand. The glow above is scoped to the pages that had it first, so these join it. */
.hand figure.win-figure { margin: 24px 0; padding: 30px 20px 18px; background: radial-gradient(ellipse at 50% 45%, var(--celadon) 0%, rgba(220, 232, 200, .45) 45%, rgba(220, 232, 200, 0) 72%); }

/* The hub: one card per hand, each showing the hand itself. */
.hand-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 28px 0 10px; }
.hand-card { padding: 18px 20px 16px; background: #fff; border: 1px solid var(--line); }
.hand-card h2, .hand-card h3 { margin: 0; font-size: 24px; line-height: 1.15; }
.hand-card .tiles { --tile-w: 17px; --tile-gap: 1px; --set-gap: 6px; margin: 10px 0; }
.hand-card p { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--muted); }

/* ------------------------------------------------------------------------------------------
   Where to play (/where-to-play/). Approved by Matt on 2026-09-26 from the mockup
   (_mockups/places.css), which loaded after everything else, so this section stays at the end.
   No line or accent under any heading (Matt's rule): headings get weight from size and space.
   ------------------------------------------------------------------------------------------ */

/* The state list near the top: one wrapped run of plain text links, underlined like every text
   link, so it stays short on a phone. */
.state-jump { margin: 0 0 34px; }
.state-jump h2 { margin: 0 0 12px; font-size: 30px; line-height: 1.1; }
.state-jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 16px; line-height: 1.6; }
.state-jump li { white-space: nowrap; }
.state-jump a { color: var(--navy); text-decoration: underline var(--line) 1.5px; text-underline-offset: 3px; }
.state-jump a:hover { text-decoration-color: var(--vermilion); }
.jump-note { margin: 12px 0 0; font-size: 15px; color: var(--muted); }
.jump-note a { color: var(--navy); }

.place-key { margin: 0 0 40px; padding: 14px 18px; background: #fff; border: 1px solid var(--line); font-size: 15px; line-height: 1.8; color: var(--muted); }

/* One section per state, cards two across. */
.state { margin: 0 0 44px; scroll-margin-top: 16px; }
.state h2 { margin: 0 0 14px; font-size: 32px; line-height: 1.1; }
.places { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.place { padding: 14px 18px 13px; background: #fff; border: 1px solid var(--line); }
.place h3 { margin: 0; font: 400 20px/1.2 "Gloock", Georgia, serif; }
.place h3 a { color: var(--navy); text-decoration: underline var(--vermilion) 1.5px; text-underline-offset: 3px; }
.place h3 a:hover { color: var(--vermilion); }
.place p { margin: 0; }
.place-where { margin-top: 2px !important; font-size: 15px; line-height: 1.4; color: var(--muted); }
.place-when { margin-top: 6px !important; font-size: 16px; line-height: 1.4; color: var(--navy); }
.place-tags { margin-top: 8px !important; line-height: 1.9; }
.place-tags .style + .flag { margin-left: 4px; }

/* Style names the site has no color for (Chinese, Taiwanese, Zung Jung, Asian): plain. */
.style-plain { color: var(--muted); }

/* The small flags: filled, so they never read as a style tag. */
.flag { display: inline-block; padding: 2px 8px 1px; background: var(--celadon); color: var(--reed-deep); font-size: 13px; font-weight: 600; white-space: nowrap; }
.flag + .flag { margin-left: 4px; }

.add-group { margin-top: 64px; margin-bottom: 40px; padding: 26px 28px 24px; background: #fff; border: 1px solid var(--navy); }
.add-group h2 { margin: 0 0 10px; font-size: 36px; }
.add-group p { margin: 0 0 12px; }

/* Phones, for the named hands and Where to play rules above. This block must stay after them:
   the hands' phone rules used to sit in the main phone block near line 640, where the base rules
   that follow overrode every line of it at equal specificity, so from the hands release until
   2026-09-23 the hub, the hand pages and the tiles page showed two cramped columns and desktop
   type sizes on a phone. */
@media (max-width: 760px) {
  .hand h2, .hub h2 { font-size: 26px; }
  .hand-list { grid-template-columns: minmax(0, 1fr); }
  .hand-card h2, .hand-card h3 { font-size: 22px; }
  .hand-card .tiles { --tile-w: 22px; }

  /* Where to play */
  .places { grid-template-columns: minmax(0, 1fr); }
  .state-jump ul { column-gap: 14px; font-size: 15.5px; }
  .add-group { padding: 20px 18px 18px; }
}