/* Charis 7 (SIL, Open Font License: fonts/OFL.txt), self-hosted and subset to Latin + IPA.
   Used for pinyin, whose stacked tone marks (ǚ, ǜ) need a font with full Latin coverage. */
@font-face { font-family: "Charis Web"; src: url("fonts/Charis-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Charis Web"; src: url("fonts/Charis-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Charis Web"; src: url("fonts/Charis-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --paper: #f5efe3;
  --paper-2: #ece3d2;
  --card: #fbf8f1;
  --ink: #1c1915;
  --ink-2: #5d564b;
  --ink-3: #847b6d;
  --rule: #d6cab4;
  --accent: #1f4e8c;
  --accent-ink: #fbf8f1;
  --accent-soft: rgba(31, 78, 140, 0.1);
  --pb: #8a5410;
  --saffron: #b7791f;
  --saffron-soft: rgba(183, 121, 31, 0.14);
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 10px 30px -12px rgba(60, 40, 10, 0.25);
  --ipa: "Charis Web", "Charis SIL", "Doulos SIL", "Gentium Plus", "Noto Serif", serif;
  --display: "Fraunces", "Charis Web", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --zh: "PingFang SC", "Noto Sans SC", "Source Han Sans SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.27 0 0 0 0 0.15 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #12150f; --paper-2: #1a1e17; --card: #171b14;
    --ink: #ece6d6; --ink-2: #b2ab96; --ink-3: #7d7867; --rule: #343528;
    --accent: #8fb3e8; --accent-ink: #12150f; --accent-soft: rgba(143, 179, 232, 0.14);
    --pb: #e0b25a; --saffron: #e0b25a; --saffron-soft: rgba(224, 178, 90, 0.14);
    --shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 12px 30px -12px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #12150f; --paper-2: #1a1e17; --card: #171b14;
  --ink: #ece6d6; --ink-2: #b2ab96; --ink-3: #7d7867; --rule: #343528;
  --accent: #8fb3e8; --accent-ink: #12150f; --accent-soft: rgba(143, 179, 232, 0.14);
  --pb: #e0b25a; --saffron: #e0b25a; --saffron-soft: rgba(224, 178, 90, 0.14);
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 12px 30px -12px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper) var(--grain);
  color: var(--ink);
  font: 400 17px/1.55 var(--ipa);
  overflow-x: hidden;
}
a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }
button { font: inherit; color: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Thai script and its transliteration, used everywhere */
.zh { font-family: var(--zh); font-weight: 500; line-height: 1.5; }
a.zh { text-decoration: none; }
a.zh:hover { color: var(--accent); }
.pb { font-family: var(--ipa); color: var(--pb); }
.en { color: var(--ink-2); }

/* ---------- masthead ---------- */
.masthead {
  position: sticky; top: 0; z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 14px clamp(16px, 4vw, 48px);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.brand { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 10px; align-items: baseline; text-decoration: none; }
/* The mark is centred by its line box, but Charis's box runs well below the brackets, so the ink sat
   low. These lift it to the middle of the name's capitals (and of the tagline, when it shows), as
   measured with the site's own fonts, which every platform loads. In em, so they scale with the mark. */
.brand-mark { grid-row: span 2; font: 500 1.9rem/1 var(--ipa); color: var(--accent); align-self: center; white-space: nowrap; position: relative; top: -0.11em; }
.brand-mark [lang="zh-Hans"] { font: 600 1.45rem/1 var(--zh); }
.brand-name { font: 800 1.35rem/1 var(--display); letter-spacing: -0.01em; font-variation-settings: "opsz" 72; }
.brand-sub { font: 400 0.68rem/1.4 var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }

.search { position: relative; max-width: 560px; width: 100%; justify-self: center; }
.search input {
  /* No native search styling: older iOS Safari adds its own magnifier next to ours. */
  -webkit-appearance: none; appearance: none;
  width: 100%;
  padding: 11px 44px 11px 42px;
  font: 400 1.05rem/1.2 var(--ipa);
  color: var(--ink);
  background: var(--card) no-repeat 14px 50% / 18px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8173' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  border: 1px solid var(--rule);
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search input::-webkit-search-decoration,
.search input::-webkit-search-results-decoration,
.search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; } /* #clear replaces it */
#clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  /* A drawn icon, centred by the grid: a × character sat low, by a different amount in each font. */
  display: grid; place-items: center; -webkit-appearance: none; appearance: none;
  background: none; color: var(--ink-3); cursor: pointer;
}
#clear svg { width: 14px; height: 14px; display: block; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
#clear:hover { background: var(--accent-soft); color: var(--ink); }
#clear[hidden] { display: none; }
.search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
#suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 6px; list-style: none;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--shadow);
  max-height: 64vh; overflow-y: auto;
}
#suggest li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline;
  padding: 7px 12px; border-radius: 8px; cursor: pointer;
}
#suggest li .s-main { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#suggest li .s-main.zh { font-weight: 600; }
#suggest li .s-kind { font: 500 0.6rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
#suggest li .s-sub { grid-column: 1 / -1; font-size: 0.9rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#suggest li .s-sub .zh { font-size: 0.95rem; color: var(--ink-2); }
#suggest li[aria-selected="true"], #suggest li:hover { background: var(--accent-soft); }
#suggest li[aria-disabled="true"] { cursor: default; color: var(--ink-3); }
#suggest li[aria-disabled="true"]:hover { background: none; }

.tools { display: flex; gap: 6px; align-items: center; }
.nav-links { display: contents; }
.tools a, .tools > button {
  font: 500 0.78rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em;
  padding: 8px 10px; border: 1px solid transparent; border-radius: 8px;
  background: none; cursor: pointer; text-decoration: none; color: var(--ink-2);
}
.tools a:hover, .tools > button:hover { border-color: var(--rule); color: var(--ink); }
.tools a.on { color: var(--accent); }

/* speaker switch: which pronouns and polite endings to show, and which voice reads them */
.speaker { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; padding: 2px; background: var(--card); }
.speaker button {
  width: 34px; height: 28px; padding: 0; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: 400 1.05rem/1 var(--ipa); color: var(--ink-3); transition: background 0.15s, color 0.15s;
}
.speaker button[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); }
.speaker button:not([aria-checked="true"]):hover { color: var(--ink); }

/* ---------- main ---------- */
main { flex: 1; width: 100%; max-width: 1000px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) clamp(16px, 5vw, 64px) 64px; }
main:focus { outline: none; }
.loading { color: var(--ink-3); font-style: italic; }

.eyebrow { font: 500 0.72rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); }
h2.eyebrow { margin: 40px 0 14px; }
.lede { font-size: 1.12rem; color: var(--ink-2); max-width: 62ch; }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.entry { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 48px; animation: rise 0.35s ease-out both; }
.page { animation: rise 0.35s ease-out both; }
.still .entry, .still .page, .still .cards a { animation: none; }
.headword {
  margin: 10px 0 0;
  padding-bottom: 0.2em;
  font: 850 clamp(2.6rem, 9vw, 5.4rem)/1.05 var(--display);
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}
.headword.zh { font: 600 clamp(2.8rem, 10vw, 5.6rem)/1.35 var(--zh); letter-spacing: 0; padding-bottom: 0; }
.headword.phrase { font-size: clamp(2rem, 6vw, 3.6rem); max-width: 22ch; }
.hw-line { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hw-pb { font: 400 clamp(1.5rem, 4vw, 2.2rem)/1.3 var(--ipa); color: var(--pb); margin: 2px 0 6px; }
.hw-ipa { font: 400 0.95rem/1.4 var(--ipa); color: var(--ink-3); margin-left: 12px; }

/* play buttons: big for headwords, small inline everywhere else */
.play {
  flex: none;
  width: 58px; height: 58px; border-radius: 50%;
  padding: 0; line-height: 0; -webkit-appearance: none; appearance: none; /* Safari's button padding shifted the icon */
  display: grid; place-items: center;
  border: 1.5px solid var(--ink); background: var(--card); color: var(--ink);
  cursor: pointer; transition: transform 0.12s, background 0.12s, color 0.12s;
}
.play svg { width: 22px; height: 22px; display: block; }
.play.sm { width: 34px; height: 34px; border-width: 1.2px; }
.play.sm svg { width: 14px; height: 14px; }
.play:hover { background: var(--ink); color: var(--paper); transform: scale(1.04); }
.play.playing { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.play.failed { opacity: 0.4; }

/* tags: register, speaker */
.tag {
  display: inline-block; vertical-align: 0.15em;
  font: 500 0.62rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.08em;
  padding: 4px 6px; border-radius: 4px; border: 1px solid var(--rule); color: var(--ink-3); white-space: nowrap;
}
.tag.casual, .tag.informal, .tag.colloquial, .tag.slang { border-color: var(--saffron); color: var(--pb); }
.tag.blunt, .tag.vulgar, .tag.derogatory, .tag.offensive { border-color: #b3261e; color: #b3261e; }
.tag.polite, .tag.formal, .tag.humble { border-color: var(--accent); color: var(--accent); }
.tag.who { border-style: dashed; }
/* Words a learner should think twice about, and the one to reach for first. */
.tag.literary, .tag.poetic, .tag.archaic, .tag.obsolete, .tag.dated, .tag.historical, .tag.royal, .tag.religious,
.tag.rare, .tag.technical, .tag.regional { background: var(--saffron-soft); border-color: var(--saffron); color: var(--pb); font-weight: 600; }
.tag.doubtful { border-color: #b3261e; color: #b3261e; font-weight: 600; }
.tag.top { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.opt.marked > .zh, .opt.marked > a.zh { opacity: 0.72; }
.callout.usage { border-color: var(--saffron); }
.tags { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; }

/* English entry: senses with Thai options */
.sense { padding: 20px 0; border-top: 1px solid var(--rule); }
.sense:last-of-type { border-bottom: 1px solid var(--rule); }
.sense-head { margin: 0 0 12px; color: var(--ink-2); }
.sense-head .pos { font: italic 400 0.95rem/1 var(--ipa); color: var(--ink-3); margin-right: 8px; }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.opt {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; align-items: center;
  padding: 12px 14px; background: var(--card); border: 1px solid var(--rule); border-radius: 14px;
}
.opt .play { grid-row: span 3; }
.opt .zh { font-size: 1.45rem; line-height: 1.35; overflow-wrap: anywhere; }
.opt .pb { font-size: 1.02rem; }
.opt .tags { margin-top: 6px; }
.opt.other-speaker { opacity: 0.55; }

.see { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; }
.see li { display: flex; gap: 8px; align-items: baseline; }
.see .zh { font-size: 1.2rem; }
.see .en { font-size: 0.88rem; }

/* Thai entry */
.pos-group { padding: 18px 0; border-top: 1px solid var(--rule); }
.pos-group:last-of-type { border-bottom: 1px solid var(--rule); }
.pos-group .pos { font: italic 400 1rem/1 var(--ipa); color: var(--ink-3); }
.pos-group ol { margin: 10px 0 0; padding-left: 1.4em; }
.pos-group li { margin: 0 0 12px; }
.pos-group li::marker { font: 700 0.85rem var(--mono); color: var(--ink-3); }
.cl { font-size: 0.92rem; color: var(--ink-3); margin-top: 6px; }

.examples { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.ex { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; align-items: center; }
.ex .play { grid-row: span 3; }
.ex .zh { font-size: 1.15rem; }
.ex .pb { font-size: 0.95rem; }
.ex .en { font-size: 0.95rem; }
.ex .credit { font: 400 0.7rem/1.4 var(--mono); color: var(--ink-3); }
.ex .credit a { text-decoration: none; }

.callout {
  margin: 22px 0 0; padding: 16px 18px; border-radius: 14px;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.callout p { margin: 4px 0 0; }
.callout a { font-weight: 700; }
.source-line { margin-top: 26px; font: 400 0.75rem/1.5 var(--mono); color: var(--ink-3); }
.auto { font: 400 0.75rem/1.4 var(--mono); color: var(--ink-3); }

/* side column */
.nearby { font-size: 0.95rem; padding-top: 12px; }
.nearby ol { list-style: none; margin: 10px 0 0; padding: 0; border-left: 1px solid var(--rule); }
.nearby li a { display: block; padding: 3px 0 3px 14px; text-decoration: none; color: var(--ink-2); }
.nearby li a.zh { font-weight: 400; }
.nearby li a:hover { color: var(--ink); }
.nearby li.here a { color: var(--ink); font-weight: 700; border-left: 3px solid var(--accent); margin-left: -2px; padding-left: 13px; }

/* phrase page */
.say { margin: 24px 0 0; padding: 22px 24px; background: var(--card); border: 1px solid var(--rule); border-radius: 18px; box-shadow: var(--shadow); }
.say-line { display: flex; gap: 18px; align-items: center; }
.say .say-line .zh { font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.4; overflow-wrap: anywhere; }
.say .pb { font-size: 1.25rem; margin-top: 2px; }
.say .meta { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; color: var(--ink-3); font-size: 0.9rem; }
.note { margin: 16px 0 0; color: var(--ink-2); max-width: 64ch; }
.lit { font-style: italic; color: var(--ink-3); }
.bd { width: 100%; border-collapse: collapse; margin-top: 8px; }
.bd td { padding: 9px 14px 9px 0; border-top: 1px solid var(--rule); vertical-align: baseline; }
.bd td.zh { font-size: 1.25rem; white-space: nowrap; }
.bd td.pb { white-space: nowrap; }
.bd td.en { font-size: 0.95rem; }

.alts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.alt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; align-items: center; padding: 14px 16px; background: var(--card); border: 1px solid var(--rule); border-radius: 14px; }
.alt .play { grid-row: span 4; }
.alt .zh { font-size: 1.35rem; }
.alt .why { color: var(--ink-2); font-size: 0.95rem; }

/* particle contrast tables: the same sentence, one particle swapped */
.contrast { margin-top: 18px; border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; background: var(--card); }
.contrast h3 { margin: 0; padding: 14px 18px; font: 700 1.05rem/1.3 var(--display); border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.contrast h3 + p { margin: 0; padding: 12px 18px 0; color: var(--ink-2); font-size: 0.95rem; }
.crow { display: grid; grid-template-columns: auto minmax(0, 15rem) minmax(0, 1fr); gap: 4px 16px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--rule); }
.contrast h3 + p + .crow, .contrast h3 + .crow { border-top: 0; }
.crow .zh { font-size: 1.35rem; }
.crow .pb { display: block; font-size: 0.98rem; }
.crow .en { display: block; font-weight: 700; color: var(--ink); }
.crow .nuance { color: var(--ink-2); font-size: 0.95rem; }
.crow mark { background: var(--saffron-soft); color: inherit; border-radius: 3px; box-shadow: 0 0 0 2px var(--saffron-soft); }

/* card grids: particles, phrase categories, home samples */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.cards a {
  display: block; padding: 16px 18px; height: 100%;
  background: var(--card); border: 1px solid var(--rule); border-radius: 14px;
  text-decoration: none; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  animation: rise 0.4s ease-out both;
}
.cards a:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow); }
.cards .c-zh { font: 600 1.7rem/1.35 var(--zh); display: block; }
.cards .c-pb { font: 400 1.05rem/1.3 var(--ipa); color: var(--pb); display: block; }
.cards .c-title { font: 750 1.2rem/1.2 var(--display); display: block; }
.cards .c-sub { font-size: 0.92rem; color: var(--ink-2); display: block; margin-top: 6px; }
.cards .c-count { font: 400 0.7rem/1.3 var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; display: block; margin-top: 8px; }

.plist { list-style: none; margin: 18px 0 0; padding: 0; }
.plist li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--rule); }
.plist li:last-child { border-bottom: 1px solid var(--rule); }
.plist .play { grid-row: span 3; }
.plist .p-en { font: 700 1.05rem/1.3 var(--display); text-decoration: none; }
.plist .p-en:hover { color: var(--accent); }
.plist .zh { font-size: 1.25rem; }
.plist .p-en, .plist .zh, .plist .pb { grid-column: 2; }
.plist .tag { grid-row: 1; grid-column: 3; }

/* home */
.home h1 {
  font: 800 clamp(2.4rem, 8vw, 5.2rem)/0.98 var(--display);
  font-variation-settings: "opsz" 144; letter-spacing: -0.035em;
  margin: 12px 0 20px; max-width: 14ch; word-spacing: 0.08em;
}
.home h1 em { font-weight: 400; font-style: italic; color: var(--accent); }

/* guide pages */
.guide h1 { font: 800 clamp(2.2rem, 7vw, 4rem)/1.05 var(--display); letter-spacing: -0.03em; margin: 12px 0 8px; }
.guide table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.guide td, .guide th { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-top: 1px solid var(--rule); }
.guide th { font: 700 0.95rem/1.3 var(--display); }
.guide td .zh { font-size: 1.3rem; }
.guide td.big { font: 400 1.6rem/1.2 var(--ipa); color: var(--pb); white-space: nowrap; }
.prose p { max-width: 66ch; color: var(--ink-2); }
.particle-body p { max-width: 66ch; }
.gist { font: 400 italic 1.25rem/1.45 var(--ipa); color: var(--ink-2); max-width: 50ch; margin: 6px 0 0; }

.notfound h1 { font: 800 2.4rem/1.1 var(--display); overflow-wrap: anywhere; }

.colophon {
  padding: 22px clamp(16px, 5vw, 64px) 30px; border-top: 1px solid var(--rule);
  font: 400 0.75rem/1.6 var(--mono); color: var(--ink-3); text-align: center;
}
.colophon #meta { display: block; margin-top: 4px; }

/* ---------- small screens ---------- */
@media (max-width: 1060px) {
  .brand-sub { display: none; }
  .brand-mark { top: -0.29em; } /* no tagline: centre on the name alone */
  .masthead { gap: 16px; }
}
@media (max-width: 900px) {
  .entry { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .nearby ol { columns: 2; border-left: 0; }
  .nearby li a { padding-left: 0; }
  .nearby li.here a { border-left: 0; margin-left: 0; padding-left: 0; color: var(--accent); }
  .crow { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .crow .play { grid-row: span 2; }
  .crow > div:last-child { grid-column: 2; }
}
@media (max-width: 700px) {
  /* Three rows: logo with the switches, the search box, the links. Everything in one row is wider
     than a phone, which stretched the header past the screen and let the page slide sideways. */
  .masthead { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 6px; padding: 8px 16px 4px; }
  .brand { justify-self: start; }
  .tools { display: contents; }
  .search { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  .nav-links { display: flex; justify-content: space-around; grid-column: 1 / -1; grid-row: 3; }
  .brand-sub { display: none; }
  .brand-mark { font-size: 1.5rem; top: -0.19em; }
  .brand-mark [lang="zh-Hans"] { font-size: 1.15rem; }
  .tools a { padding: 6px 8px; font-size: 0.7rem; }
  main { padding: 22px 16px 48px; }
  .play { width: 50px; height: 50px; }
  .say { padding: 18px 16px; }
  .bd td.zh, .bd td.pb { white-space: normal; }
  .opts { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- local edit mode ---------- */
.btn {
  font: 500 0.72rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em;
  padding: 8px 11px; border-radius: 8px; border: 1px solid var(--rule); background: var(--card); color: var(--ink-2); cursor: pointer;
}
.btn:hover { border-color: var(--ink-3); color: var(--ink); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.edit-status { font: 400 0.78rem/1.3 var(--mono); color: var(--ink-3); }
.edit-form {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; padding: 12px;
  background: var(--card); border: 1px dashed var(--ink-3); border-radius: 12px;
}
.edit-form[hidden] { display: none; }
.edit-form input { font: 400 1.15rem/1.3 var(--ipa); padding: 7px 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); color: var(--ink); min-width: 0; flex: 1 1 14rem; }
.edit-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fix { margin-left: 8px; }
body.editing .brand-sub::after { content: " · edit mode"; color: var(--accent); }


/* ---------- patterns ---------- */
.gap { color: var(--accent); font-weight: 400; letter-spacing: 0.02em; }
.cards.patterns .c-zh { font-size: 1.45rem; }
.cards.patterns .c-title { font-size: 1.02rem; margin-top: 8px; }
.cards.patterns .c-sub { font-size: 0.86rem; }
.frame { margin: 4px 0 2px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.frame .zh { font: 600 clamp(1.7rem, 5vw, 2.4rem)/1.3 var(--zh); }
.frame .pb { font: 400 clamp(1.2rem, 3vw, 1.5rem)/1.3 var(--ipa); color: var(--pb); }

/* ---------- word origins ---------- */
.origin { margin: 14px 0 4px; padding: 12px 14px; border-left: 3px solid var(--saffron); background: var(--paper-2); border-radius: 0 10px 10px 0; }
.origin .o-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.origin .o-kind { font: 700 0.72rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.origin .o-langs { font: 750 1.05rem/1.3 var(--display); }
.origin .o-text { margin: 6px 0 0; color: var(--ink-2); font-size: 0.95rem; }
.origin .o-src { margin: 6px 0 0; font: 400 0.72rem/1.3 var(--mono); color: var(--ink-3); }
.origin .o-src.ai { color: var(--pb); }
.origin + .origin { margin-top: 8px; }
.o-chip { font: 400 0.7rem/1.2 var(--mono); color: var(--ink-3); border: 1px solid var(--rule); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }

/* Pinyin: a syllable whose tone changes in speech is drawn in the accent colour, with no other mark.
   Tapping it shows the spoken form beside the pinyin. */
.tc { color: var(--accent); cursor: pointer; }
.said { color: var(--ink-3); font-size: 0.85em; margin-left: 0.5em; }
.said[hidden] { display: none; }
.tc-demo { color: var(--accent); }
.tag.hsk { border-color: var(--rule); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tag.classical, .tag.dialect { background: var(--saffron-soft); border-color: var(--saffron); color: var(--pb); font-weight: 600; }
.tag.neutral { border-color: var(--rule); color: var(--ink-2); }
ol.senses { padding-left: 1.3em; }
ol.senses li { margin: 0.2em 0; }
ul.readings { list-style: none; padding: 0; }
ul.readings li { margin: 0.3em 0; }
ul.readings .en { margin-left: 0.6em; color: var(--ink-2); }
.cl .hint { font-size: 0.85em; color: var(--ink-3); margin-left: 0.4em; }
.edit-form label { display: inline-flex; gap: 6px; align-items: center; margin-right: 10px; font-size: 0.9em; }
ul.tone-row { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
ul.tone-row li { display: grid; justify-items: start; gap: 2px; }
ul.tone-row .zh { font: 600 2rem/1.3 var(--zh); }
.measure .hw-line h2 { margin: 0; font: 600 1.8rem/1.3 var(--zh); }
.measure .hw-line .pb { margin-left: 8px; }
.measure { margin: 28px 0 36px; }
.measure p { margin: 6px 0 4px; }