/* Layout: a museum-catalogue ledger. Sticky search bar, type rail on the left
   (a menu sheet on phones), one reading column for lists and entries. Hanzi are
   set large as each entry's masthead; cinnabar is spent sparingly, like a seal. */
:root {
  /* white catalogue paper, iron-gall ink, one cinnabar seal; celadon is the only second colour.
     Hairlines and space define surfaces; quiet neutral tints guide dense tables. */
  --bg: #fefdfb; --surface: #fefdfb; --wash: #f5f3ef; --ink: #1b1915; --muted: #5d5850; --line: #e6e2db; --line-strong: #cbc4b8;
  --accent: #a52f1c; --accent-line: #d9a093; --accent-soft: #f8ede9; --celadon: #3e6d61;
  --ok: #2e6a51; --ok-soft: #eef5f1; --info: #2e5a6d; --info-soft: #eef3f6;
  --warn: #7a560e; --warn-soft: #f9f3e4; --bad: #a52f1c; --bad-soft: #faeeeb;
  --seal: #b5311d; --seal-ink: #fffaf6; --paper-grain: .05;
  --cta: #b5311d; --cta-ink: #fffaf6; --cta-hover: #9f2e1c; --stamp-op: 1;
  --h1: #628629; --h2: #23745b; --h3: #ac582d; --h4: #397ca5; --h5: #a57a11; --h6: #625954;
  --f-display: "Cormorant Garamond", "Noto Serif SC", "Noto Serif TC", Georgia, serif;
  --f-body: "Source Sans 3", "Noto Sans SC", "Noto Sans TC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --f-han: "Noto Serif SC", "Noto Serif TC", "Songti SC", "SimSun", serif;
  --f-brush: "Ma Shan Zheng Brush", "Ma Shan Zheng", "LXGW WenKai TC", "STXingkai", "KaiTi", "Noto Serif SC", serif;
  --r: 3px;
  /* type scale: reading text 16-17.5px, fluid with the viewport; meta never below 13px */
  --fs-body: clamp(16px, 14.6px + .3vw, 17.5px); --fs-lead: clamp(17px, 15px + .45vw, 19.5px);
  --fs-h1: clamp(28px, 22px + 1.3vw, 40px); --fs-h2: clamp(20px, 17.5px + .5vw, 24px);
  --lh-body: 1.65; --measure: 70ch;
  /* spacing: one 4px grid */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --tap: 44px;
  --table-head: color-mix(in srgb, var(--ink) 3.5%, var(--surface));
  --table-hover: color-mix(in srgb, var(--ink) 2.5%, var(--surface));
  --table-active: color-mix(in srgb, var(--ink) 5%, var(--surface));
  --table-control-hover: color-mix(in srgb, var(--ink) 3%, transparent);
}
/* Chinese pages: a size larger and more leading, so strokes stay open at small sizes */
:root:lang(zh-Hans), :root:lang(zh-Hant) { --fs-body: clamp(16.5px, 15px + .35vw, 18px); --lh-body: 1.8; --measure: 38em; }
:root:lang(zh-Hant) {
  --f-han: "Noto Serif TC", "Noto Serif SC", "Songti TC", serif;
  --f-body: "Source Sans 3", "Noto Sans TC", "Noto Sans SC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --f-display: "Cormorant Garamond", "Noto Serif TC", Georgia, serif;
}
:root:lang(zh-Hans), :root:lang(zh-Hant) { --f-display: var(--f-han); }
/* night: lacquer black, the same ink rules inverted */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131210; --surface: #131210; --wash: #1c1a17; --ink: #ece7de; --muted: #a9a297; --line: #2b2824; --line-strong: #423d36;
    --accent: #e8836b; --accent-line: #7d4436; --accent-soft: #2e1d18; --celadon: #8fc1b1;
    --ok: #8fc4ab; --ok-soft: #18271f; --info: #93bdd0; --info-soft: #172530;
    --warn: #dcb666; --warn-soft: #2c2415; --bad: #ef8a7a; --bad-soft: #301b18;
    --seal: #c4402b; --seal-ink: #fff7f2; --paper-grain: .04;
    --cta: #8a3526; --cta-ink: #f3e3dc; --cta-hover: #9a3d2c; --stamp-op: .85;
    --h1: #b0ce68; --h2: #61b89a; --h3: #e79463; --h4: #78b5da; --h5: #e5bc58; --h6: #b6aaa0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #131210; --surface: #131210; --wash: #1c1a17; --ink: #ece7de; --muted: #a9a297; --line: #2b2824; --line-strong: #423d36;
    --accent: #e8836b; --accent-line: #7d4436; --accent-soft: #2e1d18; --celadon: #8fc1b1;
    --ok: #8fc4ab; --ok-soft: #18271f; --info: #93bdd0; --info-soft: #172530;
    --warn: #dcb666; --warn-soft: #2c2415; --bad: #ef8a7a; --bad-soft: #301b18;
    --seal: #c4402b; --seal-ink: #fff7f2; --paper-grain: .04;
    --cta: #8a3526; --cta-ink: #f3e3dc; --cta-hover: #9a3d2c; --stamp-op: .85;
    --h1: #b0ce68; --h2: #61b89a; --h3: #e79463; --h4: #78b5da; --h5: #e5bc58; --h6: #b6aaa0;
    color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: calc(var(--fs-body) * var(--text-scale))/var(--lh-body) var(--f-body); font-feature-settings: "kern", "liga"; font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; }
/* A stationary paper tone across the document, never a scroll-linked effect. */
:root { --page-end: #f8f7f4; --hero-glow: 12%; }
:root[data-theme="dark"] { --page-end: #181715; --hero-glow: 7%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --page-end: #181715; --hero-glow: 7%; } }
body { min-height: 100vh; background-image: linear-gradient(180deg, var(--bg), var(--page-end)); background-repeat: no-repeat; }
@media print, (forced-colors: active) { body { background-image: none; } }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.005em; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
:root:not(:lang(zh-Hans)):not(:lang(zh-Hant)) h1 { font-weight: 600; font-size: calc(clamp(31px, 24px + 1.5vw, 44px) * var(--text-scale)); line-height: 1.08; }
:root:not(:lang(zh-Hans)):not(:lang(zh-Hant)) h2 { font-size: 1.6em; }
:root:not(:lang(zh-Hans)):not(:lang(zh-Hant)) h3 { font-size: 1.25em; }
.theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; }
.theme-btn:hover { border-color: var(--ink); }
.theme-btn svg { display: block; }
.theme-btn .moon { display: none; }
:root[data-theme="dark"] .theme-btn .sun { display: none; } :root[data-theme="dark"] .theme-btn .moon { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-btn .sun { display: none; } :root:not([data-theme="light"]) .theme-btn .moon { display: block; } }
.classic { margin: 18px 0 0; padding-left: 14px; border-left: 2px solid var(--seal); font-size: calc(15px * var(--text-scale)); color: var(--muted); max-width: 52ch; }
.classic .q { display: block; font-family: var(--f-han); font-size: calc(17px * var(--text-scale)); color: var(--ink); letter-spacing: .06em; }
.classic cite { font-style: normal; font-size: calc(13.5px * var(--text-scale)); }
.hero .classic .q { font-size: calc(20px * var(--text-scale)); line-height: 1.55; margin-bottom: 3px; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); }
a { color: var(--ink); text-decoration: underline 1px var(--accent-line); text-underline-offset: 3px; }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
/* Atomic inline arrows never inherit a link's underline, including on hover. */
a .link-arrow { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -.125em; text-decoration: none; overflow: visible; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
:is(.row, .rail a, .seg button, .sec, .stats a, .dom, .start-cat, .start-q, .season):focus-visible { outline-offset: -2px; }
.skip { position: absolute; left: var(--s3); top: -100px; z-index: 30; padding: 10px 16px; background: var(--ink); color: var(--bg); text-decoration: none; font-weight: 600; border-radius: var(--r); }
main:focus { outline: none; }
.chart-skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.chart-skip:focus { position: static; display: inline-block; width: auto; height: auto; clip-path: none; padding: 8px 12px; margin-block: 8px; outline: 2px solid var(--accent); }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + var(--s2)); }
.han { font-family: var(--f-han); }
a.term { color: inherit; text-decoration: underline 1px dotted var(--line-strong); text-underline-offset: 4px; }
a.term:hover { color: var(--accent); text-decoration-color: currentColor; }

.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.top-in { max-width: 1120px; margin: 0 auto; padding-block: 10px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand { --clay-hover: brightness(1.06) saturate(1.03); }
.brand img { display: block; flex: none; filter: none; transition: filter .2s ease; }
/* A restrained color lift preserves the SVG's clay shading in each theme. */
:root[data-theme="dark"] .brand { --clay-hover: brightness(1.04) saturate(1.04); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand { --clay-hover: brightness(1.04) saturate(1.04); } }
@media (hover: hover) and (pointer: fine) { .brand:hover img { filter: var(--clay-hover); } }
.brand:focus-visible img { filter: var(--clay-hover); }
/* The teapot has a light-theme and a dark-theme clay; show the one that matches the site theme. */
.brand .pot-d { display: none; }
:root[data-theme="dark"] .brand .pot-l { display: none; }
:root[data-theme="dark"] .brand .pot-d { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand .pot-l { display: none; } :root:not([data-theme="light"]) .brand .pot-d { display: block; } }
.brand .seal { font-family: var(--f-han); font-weight: 700; font-size: calc(22px * var(--text-scale)); line-height: 1; letter-spacing: .04em; }
.brand .name { font-family: var(--f-display); font-weight: 600; font-size: calc(18px * var(--text-scale)); }
.search { flex: 1 1 260px; position: relative; }
.search input { width: 100%; font: inherit; color: var(--ink); background: var(--wash); border: 1px solid transparent; border-radius: var(--r); padding: 8px 12px 8px 34px; }
.search input::placeholder { color: var(--muted); }
.search input:focus { background: var(--bg); border-color: var(--line-strong); outline: none; }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.jieqi { display: inline-flex; align-items: baseline; gap: 6px; font-size: calc(13.5px * var(--text-scale)); color: var(--muted); text-decoration: none; white-space: nowrap; }
.jieqi b { font-family: var(--f-han); font-weight: 700; font-size: calc(15px * var(--text-scale)); color: var(--ink); }
.jieqi:hover b { color: var(--seal); }
@media (max-width: 1040px) { .jieqi span { display: none; } .brand .name { display: none; } }
@media (min-width: 761px) { .top-in { flex-wrap: nowrap; } .top-in .search { flex: 1 1 140px; min-width: 110px; } }
@media (min-width: 761px) and (max-width: 1040px) { .top-in { gap: 10px; } }
@media (min-width: 1041px) and (max-width: 1140px) { :root[data-text-size="large"] .top-in { gap: 10px; } :root[data-text-size="large"] .jieqi span { display: none; } }
@media (min-width: 901px) and (max-width: 1080px) { .brand .name { max-width: 9em; line-height: 1.1; font-size: calc(16px * var(--text-scale)); } }
/* phones and small tablets: brand, language, theme and menu on one row, search full width below */
@media (max-width: 760px) {
  .top-in { gap: 8px 10px; padding-block: 8px 10px; } .brand { flex: 1 1 auto; min-width: 0; } .search { order: 3; flex: 1 1 100%; }
}
@media (max-width: 640px) {
  .brand img { width: 36px; height: 36px; }
  .menu-btn { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .menu-btn .mb-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lang select { padding: 7px 4px; max-width: 8.5em; }
}
@media (max-width: 379px) { .jieqi { display: none; } .top-in { gap: 8px 6px; } .theme-btn, .menu-btn { width: 34px; height: 34px; } .brand { gap: 7px; } .brand img { width: 32px; height: 32px; } .lang select { font-size: calc(13.5px * var(--text-scale)); max-width: 7em; padding-inline: 3px; } }
.lang select { font: inherit; font-size: calc(15px * var(--text-scale)); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 7px 8px; }

.shell { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 40px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 28px 64px; }
:root { --rail-seal:#983d2c; }
:root[data-theme="dark"] { --rail-seal:#944735; }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) { --rail-seal:#944735; } }
.rail { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 80px); align-self: start; display: flex; flex-direction: column; gap: 2px; }
.rail a { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 38px; padding: 6px 10px; border-radius: var(--r); color: var(--ink); text-decoration: none; font-size: calc(15px * var(--text-scale)); }
.rail a { border-radius: 0; box-shadow: inset 2px 0 0 transparent; }
.rail a:hover { background: var(--wash); }
.rail a[aria-current="page"] { position: relative; background: none; color: var(--ink); font-weight: 600; box-shadow: none; }
.rail a[aria-current="page"]::before { content: ''; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); width: 2px; height: calc(22px * var(--text-scale)); max-height: calc(100% - 16px); border-radius: 1px; background: var(--rail-seal); pointer-events: none; }
.rail .n { font-family: var(--f-mono); font-size: calc(13px * var(--text-scale)); color: var(--muted); font-variant-numeric: tabular-nums; }
.rail .sep { height: 1px; background: var(--line); margin: 8px 10px; }
main { min-width: 0; }
@media (max-width: 760px) {
  .shell { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 16px 48px; }
  .rail { position: static; flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .rail a { flex: none; border: 1px solid var(--line); background: var(--surface); }
  .rail .sep { display: none; }
  .brand .name { display: none; }
}

.eyebrow { font-family: var(--f-mono); font-size: calc(13px * var(--text-scale)); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; text-wrap: balance; margin: 0; line-height: 1.2; }
h1 { font-size: calc(var(--fs-h1) * var(--text-scale)); } h2 { font-size: calc(var(--fs-h2) * var(--text-scale)); } h3 { font-size: calc(16px * var(--text-scale)); font-family: var(--f-body); }
.lead { font-size: calc(var(--fs-lead) * var(--text-scale)); line-height: 1.55; max-width: 62ch; margin: 0; }
.stack { --stack-gap: clamp(var(--s6), 3vw, 40px); display: flex; flex-direction: column; gap: var(--stack-gap); }
.stack > .mast + .entry-lead { margin-top: calc(var(--s5) - var(--stack-gap)); }
.stack-sm { display: flex; flex-direction: column; gap: 10px; }
section > h2 { margin-bottom: var(--s4); }

.mast { container-type: inline-size; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: end; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
/* --u is the widest unbreakable unit of the name in em (set by mastStyle), so no unit is ever wider than the masthead */
.mast .glyphs { font-family: var(--f-han); font-weight: 700; font-size: calc(min(64px, 100cqi / var(--u, 4) * .96) * var(--text-scale)); line-height: 1.04; letter-spacing: .02em; min-width: 0; text-wrap: balance; }
.mast.long { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 14px; }
.mast.long .glyphs { font-size: calc(min(50px, 100cqi / var(--u, 4) * .96) * var(--text-scale)); line-height: 1.16; letter-spacing: .01em; }
.mast .glyphs small { display: block; font-size: calc(15px * var(--text-scale)); font-weight: 500; color: var(--muted); letter-spacing: 0; margin-top: 8px; }
.mast .glyphs small { font-size: calc(22px * var(--text-scale)); line-height: 1.45; letter-spacing: .04em; margin-top: 12px; text-align: start; }
@media(max-width: 560px) { .mast .glyphs small { font-size: calc(20px * var(--text-scale)); margin-top: 10px; } }
.mast .titles { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* the pinyin romanises the Chinese name, so it sits under it (not under the translated title); it wraps to the name's width instead of widening the column */
.mast .mast-zh { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mast .mast-zh .pinyin { width: min-content; min-width: 100%; }
.mast.no-glyph { grid-template-columns: minmax(0, 1fr); }
.mast.no-glyph .titles { padding-top: 0; }
.mast .titles h1 { overflow-wrap: anywhere; }
/* Production identities are full product titles, not oversized display glyphs. */
.mast.mast-production { grid-template-columns: minmax(0, 1fr); }
.mast-production .titles { gap: 10px; }
:root .mast-production .titles h1 { font-size: calc(clamp(26px, 2.8vw, 38px) * var(--text-scale)); line-height: 1.2; max-width: 28ch; text-wrap: pretty; }
.production-original { margin: 0; color: var(--muted); font-family: var(--f-han); font-size: calc(17px * var(--text-scale)); line-height: 1.5; max-width: 48ch; }
.mast-production .mast-meta { margin-top: 2px; }
.sold-as { margin: 6px 0 0; font-size: calc(14.5px * var(--text-scale)); line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.sold-as-label { font-weight: 600; margin-right: 4px; }
.pinyin { font-family: var(--f-display); font-style: italic; font-size: calc(18px * var(--text-scale)); color: var(--muted); }
.mast-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media (max-width: 560px) { .mast { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 14px; } .mast .glyphs { font-size: calc(min(52px, 100cqi / var(--u, 4) * .96) * var(--text-scale)); } .mast.long .glyphs { font-size: calc(min(40px, 100cqi / var(--u, 4) * .96) * var(--text-scale)); } }

.pill { display: inline-flex; align-items: center; gap: 6px; font-size: calc(13px * var(--text-scale)); font-weight: 600; padding: 2px 9px; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 99px; white-space: nowrap; }
.pill, .entry-id { font-size: calc(13px * var(--text-scale)); line-height: 1.5; min-height: calc(19.5px * var(--text-scale) + 6px); box-sizing: border-box; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; background: currentColor; box-sizing: border-box; flex: none; }
.pill.draft { color: #765310; background: #f8f1e1; border: 1px dashed #c8b07e; }
.pill.draft::before { background: transparent; }
.pill.sourced { color: #3d5b68; background: #ebf0f2; border-color: #a8bdc6; }
.pill.sourced::before { background: #486b7a; border-color: #486b7a; }
.pill.reviewed { color: #286049; background: #ebf4ef; border-color: #94bfb0; }
.pill.reviewed::before { background: #2e6d53; border-color: #2e6d53; }
:root[data-theme="dark"] .pill.draft { color: #deb96b; background: #251e12; border-color: #63502b; }
:root[data-theme="dark"] .pill.sourced { color: #a8c1cc; background: #192226; border-color: #3a5059; }
:root[data-theme="dark"] .pill.sourced::before { background: #8fb0be; border-color: #8fb0be; }
:root[data-theme="dark"] .pill.reviewed { color: #92cbb3; background: #16261f; border-color: #355e4d; }
:root[data-theme="dark"] .pill.reviewed::before { background: #7ec0a4; border-color: #7ec0a4; }
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .pill.draft { color: #deb96b; background: #251e12; border-color: #63502b; }
  :root:not([data-theme="light"]) .pill.sourced { color: #a8c1cc; background: #192226; border-color: #3a5059; }
  :root:not([data-theme="light"]) .pill.sourced::before { background: #8fb0be; border-color: #8fb0be; }
  :root:not([data-theme="light"]) .pill.reviewed { color: #92cbb3; background: #16261f; border-color: #355e4d; }
  :root:not([data-theme="light"]) .pill.reviewed::before { background: #7ec0a4; border-color: #7ec0a4; }
}
.chip { display: inline-block; font-size: calc(14.5px * var(--text-scale)); line-height: 1.5; padding: 2px 9px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.chip small { color: var(--muted); }
a.chip { text-decoration: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.alias-list { display: flex; flex-direction: column; gap: 6px; }
.alias-groups { display: flex; flex-direction: column; border-top: 1px solid var(--line-strong); }
.aliases-section .alias-groups { border-top: 0; }
.ag { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.ag:last-child { border-bottom: 0; }
.ag-h { font-size: calc(14px * var(--text-scale)); font-weight: 400; line-height: 1.5; color: var(--muted); }
.ag-b { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; min-width: 0; list-style: none; margin: 0; padding: 0; }
.ag-b .chips:empty { display: none; }
.an { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; align-content: start; padding-block: 0; }
.an:first-child { padding-top: 0; }
.an:last-child { padding-bottom: 0; }
.an.alias-wide { grid-column: 1 / -1; }
.an.has-note { grid-template-columns: minmax(0, 1fr); }
.alias-name { font-weight: 500; font-size: calc(16px * var(--text-scale)); min-width: 0; overflow-wrap: break-word; }
.ag-simple .ag-b { display: flex; flex-wrap: wrap; gap: 4px 0; align-items: baseline; }
.ag-simple .an { display: flex; align-items: baseline; gap: 0; min-width: 0; max-width: 100%; }
.ag-simple .an:not(:last-child)::after { content: ","; margin-inline-end: 8px; }
.ag-simple .alias-identity { display: block; min-width: 0; }
.alias-chinese { font-family: var(--f-han); font-weight: 600; font-size: calc(18px * var(--text-scale)); line-height: 1.6; }
.alias-qualifier { font: 400 calc(14.5px * var(--text-scale))/1.6 var(--f-body); overflow-wrap: break-word; }
.notes-prose { display: grid; gap: 16px; }
.notes-section { container-type: inline-size; }
.note-topics { display: grid; gap: 24px; }
.note-source-group { min-width: 0; break-inside: avoid; }
.note-source-group .note-topic + .note-topic { margin-top: 24px; }
@container (min-width: 740px) {
  .note-topics:has(> :nth-child(2)) { display: block; columns: 2; column-gap: 32px; }
  .note-topics:has(> :nth-child(2)) > .note-source-group { margin-bottom: 24px; }
}
.note-topic { min-width:0; }
.note-topic h3 { margin:0 0 8px; font-family:var(--f-body); font-size:calc(16.5px * var(--text-scale)); font-weight:600; line-height:1.5; }
.note-topic .note { margin:0; }
.note-topic .note + .note { margin-top:12px; }
.note-topic-sources { display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:8px; font-size:calc(12px * var(--text-scale)); line-height:1.6; }

.notes-prose .note { margin: 0; max-width: 70ch; line-height: 1.7; }
.an .note { color: var(--muted); font-size: calc(14.5px * var(--text-scale)); line-height: 1.6; min-width: 0; }
h2 .count { font-family: var(--f-mono); font-size: calc(13.5px * var(--text-scale)); font-weight: 400; color: var(--muted); margin-left: 6px; vertical-align: 2px; }
@media (max-width: 600px) { .ag { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-block: 10px; } .ag-b { grid-template-columns: minmax(0, 1fr); gap: 12px; } .ag-h { padding-top: 0; font-size: calc(13.5px * var(--text-scale)); } }
.alias-list div { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.alias-list span.note { color: var(--muted); font-size: calc(14.5px * var(--text-scale)); }

.facts { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 10px 20px; margin: 0; }
.facts dt { color: var(--muted); font-size: calc(14.5px * var(--text-scale)); padding-top: 1px; }
.facts dd { margin: 0; min-width: 0; }
.facts .fact-definitions-label { align-self:center; padding-top:0; }
.facts .fact-definitions .cites { display:flex; margin:0; }
.region-editorial-facts { grid-template-columns: minmax(150px, 24%) minmax(0, 1fr); gap: 18px 24px; }
.region-editorial-facts dt { color: var(--ink); font-size: calc(16px * var(--text-scale)); font-weight: 600; line-height: 1.55; padding-top: 0; }
.region-editorial-facts dt .han { display: block; margin-top: 3px; font-size: calc(16px * var(--text-scale)); font-weight: 500; color: var(--muted); }
.region-editorial-facts dd { line-height: 1.7; }
.source-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 12px; margin-top: 6px; }
@media (max-width: 560px) { .region-editorial-facts { grid-template-columns: minmax(0, 1fr); gap: 5px; } .region-editorial-facts dd { margin-bottom: 18px; } .region-editorial-facts dd:last-child { margin-bottom: 0; } }
.fact-regions { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fact-regions .path { margin-top: 2px; }
@media (max-width: 560px) { .facts { grid-template-columns: minmax(0, 1fr); gap: 2px; } .facts dd { margin-bottom: 10px; } }
.path { font-size: calc(13.5px * var(--text-scale)); color: var(--muted); } .path a { color: var(--muted); text-decoration-color: var(--line-strong); }

/* A reading sequence: step identity and explanation align without duplicating text. */
.tea-processing { container-type: inline-size; }
.process-overview { padding: 2px 0; }
.process-overview h3 { margin: 0 0 9px; font: 600 calc(17px * var(--text-scale))/1.45 var(--f-body); }
.process-overview p { margin: 12px 0 0; font-size: calc(15.5px * var(--text-scale)); line-height: 1.65; }
.process-overview .process-script { margin: 0; font-family: var(--f-han); font-size: calc(17px * var(--text-scale)); color: var(--muted); }
.process-sequence { display: flex; flex-wrap: wrap; gap: 8px 0; list-style: none; margin: 0; padding: 0; font-family: var(--f-han); font-size: calc(17px * var(--text-scale)); line-height: 1.7; color: var(--muted); }
.process-sequence li { display: flex; align-items: center; }
.process-sequence li:not(:last-child)::after { content: ''; flex: 0 0 auto; width: 4px; height: 4px; border-block-start: 1px solid var(--line-strong); border-inline-end: 1px solid var(--line-strong); transform: rotate(45deg); margin-inline: 12px; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; position: relative; display: grid; grid-template-columns: 34px minmax(150px, .7fr) minmax(0, 1.8fr); gap: 16px; padding: 14px 0; }
.steps li::before { content: counter(s, decimal-leading-zero); position: relative; z-index: 1; align-self: start; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--celadon); font: 500 calc(12px * var(--text-scale))/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.steps li:not(:last-child)::after { content: ''; position: absolute; left: 16px; top: 46px; bottom: -14px; border-left: 1px solid var(--line); }
.steps .step-heading { min-width: 0; }
.steps .step-heading h3 { margin: 3px 0 0; font: 600 calc(17px * var(--text-scale))/1.45 var(--f-body); }
.steps .zh { display: block; margin-top: 5px; font-family: var(--f-han); font-size: calc(17px * var(--text-scale)); line-height: 1.65; color: var(--muted); }
.steps .step-note { min-width: 0; }
.steps p { margin: 2px 0 0; color: var(--ink); font-size: calc(15.5px * var(--text-scale)); line-height: 1.65; }
.steps li:not(:has(.step-note)) .step-heading { grid-column: 2 / -1; }
@container (max-width: 620px) {
  .steps li { grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; padding-block: 12px; }
  .steps .step-note { grid-column: 2; }
  .steps li:not(:last-child)::after { top: 44px; bottom: -12px; }
  .steps .zh { margin-top: 3px; }
}


.note { white-space: pre-line; margin: 0; max-width: 66ch; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.todo { border-left: 2px solid color-mix(in srgb, var(--warn) 48%, var(--line)); background: color-mix(in srgb, var(--warn-soft) 32%, var(--surface)); border-radius: 0 var(--r) var(--r) 0; padding: 12px 16px; font-size: calc(15px * var(--text-scale)); line-height: 1.65; }
.todo > strong { font-weight: 550; }
.tr-note { margin: 40px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: calc(13px * var(--text-scale)); color: var(--muted); }
.notice { font-size: calc(14.5px * var(--text-scale)); color: var(--muted); border: 1px dashed var(--line); border-radius: var(--r); padding: 8px 12px; }
.mt.mv { color: var(--ok); }
.mt { font-size: calc(13px * var(--text-scale)); font-weight: 500; line-height: 1.4; color: var(--info); background: none; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); padding: 0 6px; border-radius: var(--r); margin-left: 6px; white-space: nowrap; vertical-align: 1px; }

.amb { display: grid; }
.amb article { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 3fr); gap: 12px 28px; padding: 20px 0; }
.amb article:first-child { padding-top: 4px; }
.amb article + article { border-top: 1px solid var(--line); }
.amb h3 { font-family: var(--f-body); font-size: calc(16px * var(--text-scale)); font-weight: 600; line-height: 1.55; margin: 0; overflow-wrap: anywhere; }
.amb-body { min-width: 0; }
.amb p { margin: 0; line-height: 1.7; }
.amb p, .detail-prose .note { font-size: calc(clamp(16px, 15.2px + .1vw, 16.5px) * var(--text-scale)); line-height: 1.7; }
:is(:root:lang(zh-Hans), :root:lang(zh-Hant), :root:lang(ja)) :is(.amb p, .detail-prose .note) { font-size: calc(16.5px * var(--text-scale)); line-height: 1.8; }
.amb p + p { margin-top: 12px; }
.amb .src { display: grid; gap: 6px; padding: 0; border: 0; margin-top: 12px; font-size: calc(13.5px * var(--text-scale)); line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
.detail-prose > .note, .detail-prose .notes-prose .note { max-width: none; line-height: 1.75; }
@media (max-width: 760px) { .amb article { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-block: 18px; } }
#decode-out { display: flow-root; overflow-anchor: none; }
#decode { width: min(100%, 24rem); font: inherit; font-family: var(--f-mono); font-size: max(16px, calc(16px * var(--text-scale))); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); }
#decode-out { margin-top: 16px; overflow-wrap: anywhere; }
.decoder-match, .decoder-meaning dl { margin: 0; display: grid; gap: 10px; }
.decoder-match > div, .decoder-meaning dl > div { display: grid; grid-template-columns: minmax(7rem, 20%) minmax(0, 1fr); gap: 12px; align-items: baseline; }
.decoder-match dt, .decoder-meaning dt { color: var(--muted); font-size: calc(14px * var(--text-scale)); }
.decoder-match dd, .decoder-meaning dd { margin: 0; line-height: 1.55; }
.decoder-link-icon { width: 14px; height: 14px; margin-inline-start: 5px; vertical-align: -1px; opacity: .65; }
.decoder-batch { font-family: var(--f-mono); }
.decoder-message { margin-top: 14px; }
.decoder-meaning { margin-top: 14px; }
.decoder-meaning summary { width: fit-content; padding: 6px 0; color: var(--muted); cursor: pointer; }
.decoder-meaning[open] summary { margin-bottom: 8px; }
.decoder-productions { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.decoder-productions li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.decoder-offer-context { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-bottom: 14px; }
.decoder-offer-context p { margin: 0; }
.decoder-offer-context button { max-width: 100%; background: transparent; font: inherit; font-size: calc(13px * var(--text-scale)); white-space: normal; text-align: start; cursor: pointer; }
@media(max-width: 420px) { .decoder-match > div, .decoder-meaning dl > div { grid-template-columns: minmax(0,1fr); gap: 2px; } }


section > h2 + .rows { border-top: 0; }
.rows { display: grid; grid-template-columns: fit-content(10em) minmax(0, 1fr) auto; column-gap: 18px; border-top: 1px solid var(--line); }
.row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; padding: 12px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { :is(.row, .vendor-row):hover { background: var(--wash); text-decoration: none; } }
:is(.row, .vendor-row):focus-visible { background: var(--wash); outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r); }
.row, .vendor-row, .group-h { -webkit-tap-highlight-color: transparent; }
.row .h { font-family: var(--f-han); font-weight: 700; font-size: calc(20px * var(--text-scale)); line-height: 1.25; min-width: 3.2em; text-wrap: balance; }
.row .t { font-weight: 600; }
.row .h:empty { display: none; }
.row .h:empty + div { grid-column: 1 / 3; }
.row .t em { font-family: var(--f-display); font-weight: 500; font-size: 1.06em; color: var(--muted); margin-left: 2px; }
.row .s { color: var(--muted); font-size: calc(15px * var(--text-scale)); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row .why { font-size: calc(13px * var(--text-scale)); color: var(--accent); margin-top: 2px; }
.search-more { grid-column: 1 / -1; justify-self: start; margin-top: 12px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); background: var(--surface); font: inherit; font-size: calc(14px * var(--text-scale)); cursor: pointer; }
.search-more:hover, .search-more:focus-visible { background: var(--wash); border-color: var(--muted); }
.price-footnote { max-width:none; margin: 18px 0 0; font-size: calc(12.5px * var(--text-scale)); line-height: 1.6; text-wrap: wrap; }
.price-note { display: block; max-width: 52ch; margin-top: 6px; white-space: normal; text-align: start; overflow-wrap: anywhere; }
.price-note > summary { display: flex; align-items: center; gap: 7px; min-height: 44px; width: fit-content; max-width: 100%; box-sizing: border-box; padding: 6px 0; cursor: pointer; list-style: none; color: var(--muted); line-height: 1.45; }
.price-note > summary::-webkit-details-marker { display: none; }
.price-note > summary::after { content: ""; width: 5px; height: 5px; flex: 0 0 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); margin: -3px 3px 0; }
.price-note[open] > summary::after { transform: rotate(225deg); margin-top: 3px; }
.price-note > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.price-note > p { margin: 0 0 6px; padding-inline-start: 10px; border-inline-start: 1px solid var(--line); font-size: inherit; line-height: 1.6; color: var(--muted); }
@media (hover: hover) { .price-note > summary:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } }
.group { display: flex; flex-direction: column; }
.group + .group { margin-top: 26px; }
.tea-category-jumps { position: sticky; top: calc(var(--category-anchor-offset, 76px) - 12px); z-index: 4; margin-bottom: 8px; background: var(--bg); border-block: 1px solid var(--line); font-size:calc(14px * var(--text-scale)); }
.tea-category-jumps ol { display: flex; gap: 0; list-style: none; margin: 0 0 -1px; padding: 4px 0 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.tea-category-jumps ol::-webkit-scrollbar { display: none; }
.tea-category-jumps li { flex: 0 0 auto; min-width: 0; }
.tea-category-jumps a { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 10px; color: var(--ink); font-size: calc(14px * var(--text-scale)); line-height: 1.4; text-decoration: none; border-radius: var(--r); }
.tea-category-jumps li a { height: 100%; white-space: nowrap; }
.tea-category-jumps a > span:first-of-type { white-space:nowrap; }
.tea-category-jumps .count { flex:none; }
.tea-category-jumps a:not([data-catalogue-category])::before { display:none; }
.tea-category-jumps li a::before { content: ''; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--category-color); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); }
.tea-category-jumps a:focus-visible { text-decoration:none; }
.tea-category-jumps .count { color: var(--muted); font-size: .85em; font-variant-numeric: tabular-nums; }
.tea-category-jumps .tea-category-extra { width: fit-content; max-width: 100%; margin-inline-start: auto; margin-bottom: 4px; }
.tea-category-extra svg { flex: 0 0 14px; width: 14px; height: 14px; margin-left: 2px; }
.tea-category { --category-inset: 12px; }
@media (max-width: 560px) { .tea-category { --category-inset: 10px; } }
.tea-category > h2 { display: flex; flex-wrap:wrap; align-items: baseline; gap: 0 16px; padding: 8px var(--category-inset); margin-bottom: 0; border: 0; border-top: 2px solid color-mix(in srgb, var(--category-color) 65%, var(--line)); font-size: calc(26px * var(--text-scale)); }
[data-theme="dark"] .tea-category > h2 { border-top-color: color-mix(in srgb, var(--category-color) 68%, #777168); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tea-category > h2 { border-top-color: color-mix(in srgb, var(--category-color) 68%, #777168); } }
.tea-category > h2 .count { margin-inline-start:auto; flex:none; }
.tea-category-title { min-width:0; }
.tea-category[hidden] { display:none; }
.tea-category-learn { display:inline-flex; align-items:baseline; gap:6px; margin:0; padding:0; font-family:var(--f-body); font-weight:400; font-size:calc(14px * var(--text-scale)); line-height:1.4; }
@media(max-width:560px) {
 .tea-category-learn { order:3; flex-basis:100%; }
 .tea-category > h2 .count { order:2; }
}
.tea-category-learn a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 100%; color:var(--muted); text-underline-offset:3px; }
.tea-category-learn a:hover { color:var(--ink); }
.text-link-arrow { display:inline-block; color:var(--muted); text-decoration:none; pointer-events:none; }
/* Keep the neutral selection rule crisp and inside the shared divider. */
.tea-category-jumps a[aria-current="true"]::after { pointer-events:none; }
.tea-category-jumps a { position:relative; border-radius:0; transition:background-color .16s ease; }
.tea-category-jumps a[aria-current="true"] { background:transparent; box-shadow:none; }
.tea-category-jumps a[aria-current="true"]::after { content:''; position:absolute; inset-inline:10px; bottom:0; height:2px; background:color-mix(in srgb, var(--muted) 72%, var(--line)); }
.tea-category-jumps a:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
@media(hover:hover) { .tea-category-jumps a:hover { background:var(--wash); } }
.tea-category[id] { scroll-margin-top: calc(var(--category-anchor-offset, 76px) + 56px * var(--text-scale)); }
.region-jumps.otp { border-top: 0; padding-top: 0; margin-bottom: 24px; }
.region-jumps a { gap: 12px; justify-content: space-between; }
.region-jumps .count { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .9em; }
.group[id] { scroll-margin-top: calc(var(--header-h, 64px) + 12px); }
.group-h { display: flex; align-items: baseline; gap: 12px; padding: 4px 4px 10px; color: var(--ink); text-decoration: none; flex-wrap: wrap; }
.group-h .han { font-family: var(--f-han); font-weight: 700; font-size: calc(26px * var(--text-scale)); line-height: 1.1; }
.group-h .gt { font-family: var(--f-display); font-weight: 600; font-size: calc(20px * var(--text-scale)); }
.group.region-root > .group-h { padding: 13px 16px; gap: 6px 12px; background: color-mix(in srgb, var(--ink) 2%, var(--surface)); border-block: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0; }
.region-title-link { display: inline-flex; align-items: baseline; gap: 12px; min-width: 0; color: inherit; text-decoration: none; flex-wrap: wrap; }
.region-root > .group-h .h-link { opacity: .6; margin-left: 0; font-size: 14px; padding: 4px; }
.region-root > .group-h .h-link:hover { opacity: 1; }
.group.region-root > .group-h .han { font-weight: 600; }
.group.region-root > .group-h .pill { margin-inline-start: auto; }
.group.region-root > .group-h:is(:hover,:focus-visible) { background: var(--table-head); text-decoration: none; }
.group.region-root > .group-h:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .group-h:hover .gt { color: var(--accent); } }
section > h2 { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.row .why { color: var(--muted); }
@media (max-width: 560px) { .rows { display: flex; flex-direction: column; } .row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding-inline: 10px; } .row .h { grid-column: 1 / -1; font-size: calc(18px * var(--text-scale)); min-width: 0; } }
@media (max-width: 560px) { .row .h:empty + div { grid-column: 1; } }
@media (max-width: 560px) {
  #regions .row { grid-template-columns: minmax(0,1fr) auto; gap: 6px 12px; padding-block: 16px; }
  #regions .row .h { grid-column: 1; grid-row: 1; }
  #regions .row > div:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  #regions .row > div:last-child { grid-column: 2; grid-row: 1; align-self: center; }
  #regions .row .t { text-wrap: pretty; }
  #regions .row .s { margin-top: 5px; -webkit-line-clamp: 3; }
  #regions .row .why { margin-top: 3px; }
}

.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.stats a { background: var(--surface); padding: 12px 14px; text-decoration: none; color: var(--ink); }
.stats a:hover { background: var(--wash); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stats b { display: block; font-family: var(--f-display); font-size: calc(26px * var(--text-scale)); font-weight: 600; font-variant-numeric: tabular-nums; }
.stats span { font-size: calc(13.5px * var(--text-scale)); color: var(--muted); }
.bar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--line); }
.bar i { display: block; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: calc(13.5px * var(--text-scale)); color: var(--muted); margin-top: 8px; }
/* Start here: category tiles, question cards and the shelf row. */
.start-intro { margin: 0 0 20px; max-width: 72ch; color: var(--muted); font-size: calc(15px * var(--text-scale)); line-height: 1.65; }
.start-group + .start-group { margin-top: 28px; }
:root .start-group > h3.start-h { margin: 0 0 12px; font-family: var(--f-mono); font-size: calc(13px * var(--text-scale)); font-weight: 400; line-height: 1.4; }
.start-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.start-cats li { display: flex; min-width: 0; }
.start-cat, .start-q { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); text-decoration: none; transition: background-color .18s ease, border-color .18s ease; }
.start-cat:hover, .start-q:hover { border-color: var(--line-strong); background: var(--wash); color: var(--ink); }
.start-cat { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; column-gap:12px; row-gap:4px; align-content:center; flex:1 1 auto; min-width:0; padding:14px 16px; }
.start-ch { grid-column:2; grid-row:1 / 3; align-self:center; font-family:var(--f-brush); font-size:calc(40px * var(--text-scale)); line-height:1; color:var(--muted); opacity:.55; }
.start-cat b { grid-column:1; grid-row:1; display:flex; align-items:baseline; gap:.45em; font-weight:600; font-size:calc(15px * var(--text-scale)); line-height:1.35; hyphens:manual; overflow-wrap:break-word; }
.start-cat b::before { content:''; flex:none; box-sizing:border-box; width:.64em; height:.64em; border-radius:50%; border:1px solid color-mix(in srgb, var(--category-color) 62%, var(--ink)); background:var(--category-color); transform:translateY(.005em); }
.start-n { grid-column:1; grid-row:2; font-size:calc(13.5px * var(--text-scale)); color:var(--muted); font-variant-numeric:lining-nums tabular-nums; }
.start-cat .start-n::after { content:" →"; display:inline-block; margin-inline-start:6px; opacity:0; transition:opacity .18s ease; }
.start-cat:is(:hover,:focus-visible) .start-n::after { opacity:.8; }
@media(max-width:560px) { .start-cats { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.start-qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.start-q { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 16px; }
.start-q-ch { font-family: var(--f-brush); font-size: calc(40px * var(--text-scale)); line-height: 1; color: var(--muted); width: 44px; text-align: center; opacity: .7; }
.start-q-body { display: flex; flex-direction: column; min-width: 0; height: 100%; }
.start-q b { display: block; font-weight: 600; line-height: 1.35; }
.start-q-d { display: block; margin-top: 4px; font-size: calc(13.5px * var(--text-scale)); line-height: 1.55; color: var(--muted); }
.start-q-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: auto; padding-top: 10px; font-size: calc(13px * var(--text-scale)); color: var(--muted); }
.start-shelf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; }
@media (max-width: 760px) { .start-shelf .start-compare { display: none; } }
/* Quiet outline action; theme-aware ink keeps both palettes understated. */
.start-surprise { display:inline-flex; align-items:center; justify-content:center; min-height:44px; max-width:100%; padding:8px 22px; border:1px solid color-mix(in srgb, var(--muted) 48%, var(--line)); border-radius:99px; background:transparent; color:var(--ink); font-weight:500; line-height:1.35; text-align:center; text-decoration:none; transition:background-color .18s ease, border-color .18s ease; }
@media (hover:hover) { .start-surprise:hover { background:color-mix(in srgb, var(--ink) 5%, var(--bg)); border-color:var(--muted); color:var(--ink); } }
.start-surprise:active { background:color-mix(in srgb, var(--ink) 8%, var(--bg)); color:var(--ink); }
.start-surprise:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.start-quiet { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); }
.start-quiet:hover { color: var(--ink); }

.filters { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-bottom: 10px; }
.seg { display: inline-flex; max-width: 100%; border: 1px solid var(--line); border-radius: var(--r); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; background: var(--surface); vertical-align: middle; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: none; white-space: nowrap; }
.filters > span { display: inline-flex; align-items: center; max-width: 100%; min-width: 0; }
.seg button { font: inherit; font-size: calc(13.5px * var(--text-scale)); color: var(--ink); background: none; border: 0; padding: 5px 11px; cursor: pointer; border-left: 1px solid var(--line); }
.seg button:first-child { border-left: 0; }
.seg button[aria-pressed="true"] { background: color-mix(in srgb, var(--ink) 8%, var(--surface)); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 20%, var(--line)); }
.seg button:not([aria-pressed="true"]):hover { background: var(--wash); }
.filters label { font-size: calc(13.5px * var(--text-scale)); color: var(--muted); margin-right: 6px; }
.claim { font-size: calc(13px * var(--text-scale)); font-weight: 500; line-height: 1.4; color: var(--warn); background: none; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); padding: 0 6px; border-radius: var(--r); margin-left: 6px; white-space: nowrap; }
.ref { color: var(--info); }
.tbl { overflow-x: auto; border-block: 1px solid var(--line-strong); background: var(--surface); }
/* A section heading already provides the table's opening divider. */
section > h2 + :is(.tbl, .kfacts, .recipe-code-break, .gcards) { border-top: 0; }
.tbl table { border-collapse: collapse; width: 100%; font-size: calc(15px * var(--text-scale)); line-height: 1.55; min-width: 700px; }
.tbl th { text-align: left; font-weight: 600; font-size: calc(13px * var(--text-scale)); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 12px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.tbl thead th { background: var(--table-head); vertical-align: middle; }
.tbl td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tbody tr:last-child > :is(th, td) { border-bottom: 0; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tbody tr { transition: background-color .14s ease-out; }
/* A quiet reading guide, separate from selected or warning states. */
@media (hover: hover) and (pointer: fine) {
  .tbl tbody tr:hover { background: var(--table-hover); }
}
.tbl tbody tr:has(:focus-visible) { background: var(--table-hover); }
@media (prefers-reduced-motion: reduce) { .tbl tbody tr { transition: none; } }
/* listing tables: a ledger on wide columns, a stack of price cards when the column is narrow */
.tbl:has(.lt) { container-type: inline-size; }
@container (max-width: 620px) {
  .tbl table.lt { min-width: 0; }
  .lt thead { display: none; }
  .lt, .lt tbody { display: block; }
  .lt tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "p p pp" "v v pr" "e e e" "y o o"; gap: 3px 14px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
  .lt tr:last-child { border-bottom: 0; }
  .lt td { display: block; padding: 0; border: 0; min-width: 0; }
  .lt .c-p { grid-area: p; font-weight: 600; }
  .lt .c-pp { grid-area: pp; } .lt .c-pr { grid-area: pr; font-size: calc(13.5px * var(--text-scale)); }
  .lt .c-v { grid-area: v; font-size: calc(14.5px * var(--text-scale)); } .lt .c-e { grid-area: e; font-size: calc(14.5px * var(--text-scale)); }
  .lt .c-y { grid-area: y; } .lt .c-o { grid-area: o; }
  .lt .c-y, .lt .c-o { font-size: calc(13px * var(--text-scale)); color: var(--muted); text-align: left; margin-top: 2px; }
  .lt .c-y::before, .lt .c-o::before { content: attr(data-h) " "; font-size: calc(13px * var(--text-scale)); text-transform: uppercase; letter-spacing: .05em; }
}
.tbl .ships { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin-top: 6px; }
.price-references { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 14px; }
.price-references > summary { cursor: pointer; font-weight: 500; }
.price-references > h3 { margin: 0; font: 500 calc(16px * var(--text-scale))/1.5 var(--f-body); }
.price-references > .path { margin: 10px 0 14px; max-width: 76ch; }
.shiptag { display: inline-flex; align-items: center; box-sizing: border-box; min-height: 26px; gap: 6px; font-size: calc(13px * var(--text-scale)); line-height: 1.25; font-weight: 500; padding: 4px 9px; border-radius: var(--r); background: none; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.shiptag.ww { border-color: color-mix(in srgb, var(--celadon) 45%, transparent); color: var(--celadon); }
.shiptag svg { flex: none; }

.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.check-list li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; font-size: calc(15px * var(--text-scale)); padding: 8px 12px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.check-list .lvl { font-family: var(--f-mono); font-size: calc(13px * var(--text-scale)); text-transform: uppercase; letter-spacing: .06em; padding-top: 2px; }
.check-list .err .lvl { color: var(--bad); } .check-list .warn .lvl, .check-list .todo-i .lvl { color: var(--warn); }
.okbox, .badbox { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: var(--r); font-weight: 600; }
.okbox { background: var(--ok-soft); color: var(--ok); } .badbox { background: var(--bad-soft); color: var(--bad); }
.src { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); }
.src:first-child { border-top: 0; }
.src .meta { font-size: calc(13.5px * var(--text-scale)); color: var(--muted); }
.src .source-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px; line-height: 1.5; }
.src .source-meta .kind { display: inline-block; max-width: 100%; margin: 0; padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; font-size: calc(11.5px * var(--text-scale)); letter-spacing: .035em; line-height: 1.5; overflow-wrap: normal; }
.source-accessed { font-size: calc(12px * var(--text-scale)); display: inline-block; white-space: nowrap; font-variant-numeric: tabular-nums; }
.source-meta .source-notes { flex-basis: 100%; min-width: 0; max-width: 100%; margin: 0; overflow-wrap: anywhere; }
.src a, .src .source-title { overflow-wrap: anywhere; }
.note, .lead, .amb p, .an .note { overflow-wrap: break-word; }
main p, .note, dd { max-width: var(--measure); }
.tbl p, .tbl dd, .row p { max-width: none; }
.kind { font-family: var(--f-mono); font-size: calc(13px * var(--text-scale)); text-transform: uppercase; letter-spacing: .06em; padding: 1px 6px; border-radius: 3px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
.empty { color: var(--muted); padding: var(--s4) var(--s4); border: 1px dashed var(--line-strong); border-radius: var(--r); margin: 0; }
.state { align-items: flex-start; padding-block: var(--s7); }
.state-mark { font-family: var(--f-brush); font-size: calc(72px * var(--text-scale)); line-height: 1; color: var(--seal); opacity: .85; }
.state .lead { color: var(--muted); }
.wheel svg text { paint-order: stroke; }
.almanac { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 18px; border-top: 1px solid var(--line); }
.alm-s { padding: 14px 14px 6px; border-right: 1px solid var(--line); min-width: 0; }
.alm-s:last-child { border-right: 0; }
.alm-h { display: flex; align-items: baseline; gap: 8px; font-size: calc(13.5px * var(--text-scale)); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.alm-ch { font-family: var(--f-brush); font-size: calc(30px * var(--text-scale)); line-height: 1; text-transform: none; }
.almanac ol { list-style: none; margin: 0; padding: 0; }
.almanac li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px dashed var(--line); }

.almanac li.now .alm-zh { color: var(--seal-text); }
.almanac li.now .alm-d::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 7px; border-radius: 50%; background: var(--seal-text); vertical-align: middle; }
.alm-zh { font-family: var(--f-han); font-weight: 700; font-size: calc(17px * var(--text-scale)); line-height: 1.3; width: 2.3em; }
.alm-m { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: calc(14.5px * var(--text-scale)); min-width: 0; }
.alm-m i { font-style: italic; color: var(--muted); font-size: calc(13px * var(--text-scale)); }
.alm-d { color: var(--muted); font-size: calc(13px * var(--text-scale)); font-variant-numeric: tabular-nums; width: 100%; }
.alm-n { width: 100%; font-size: calc(13px * var(--text-scale)); color: var(--ink); line-height: 1.45; padding-left: 8px; border-left: 2px solid var(--line); margin-top: 2px; }
@media (max-width: 1000px) { .almanac { grid-template-columns: repeat(2, minmax(0, 1fr)); } .alm-s:nth-child(2) { border-right: 0; } .alm-s:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 520px) { .almanac { grid-template-columns: minmax(0, 1fr); } .alm-s { border-right: 0; border-bottom: 1px solid var(--line); } }
/* home */
.hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; padding: 30px 34px 36px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 0; box-shadow: inset 0 0 0 5px var(--surface), inset 0 0 0 6px var(--line); }
.hero h1 { font-size: calc(clamp(28px, 4.4vw, 42px) * var(--text-scale)); line-height: 1.12; margin: 6px 0 14px; max-width: 18ch; }
@media (min-width: 761px) {
  .hero h1 { max-width: none; text-wrap: balance; }
  :root:lang(zh-Hans) .hero h1, :root:lang(zh-Hant) .hero h1 { max-width: none; }
}
.hero .lead { max-width: 56ch; }
.hero-text { position: relative; z-index: 1; min-width: 0; }
.hero-art { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 14px; padding-top: 4px; }
.vert { writing-mode: vertical-rl; font-family: var(--f-brush); font-size: calc(54px * var(--text-scale)); line-height: 1; color: var(--ink); letter-spacing: .06em; }
.vert i { font-style: normal; color: var(--seal); margin: 8px 0; }
/* Broad, restrained ink variation preserves the brush font’s original contours. */
.hero-art .vert { filter: url(#hero-brush-ink); }
@media (max-width: 760px), (forced-colors: active), print { .hero-art .vert { filter: none; } }
.hero-seal { display: inline-flex; flex-direction: column; gap: 2px; font-family: var(--f-han); font-weight: 600; font-size: calc(18px * var(--text-scale)); line-height: 1.25; color: var(--seal-ink); background: var(--seal); padding: 6px 7px; border-radius: 3px; margin-top: 6px; text-align: center; }
.hero-ridge { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 90px; }
.season { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); text-decoration: none; }
.season:hover { border-color: var(--line-strong); }
.season-term { display: flex; flex-direction: column; align-items: center; min-width: 84px; padding-right: 20px; border-right: 1px solid var(--line); }
.season-term b { font-family: var(--f-brush); font-weight: 400; font-size: calc(40px * var(--text-scale)); line-height: 1; }
.season-term span { font-size: calc(13px * var(--text-scale)); color: var(--muted); margin-top: 6px; text-align: center; }
.season-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.season-now { display: flex; flex-wrap: wrap; gap: 6px 16px; font-weight: 500; }
.season-now span { display: inline-flex; align-items: center; gap: 7px; }
.season-now i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.secs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.sec { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; min-height: 128px; padding: 14px 14px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.sec:hover { border-color: var(--line-strong); background: var(--wash); }
.sec-ch { position: absolute; right: -6px; bottom: -14px; font-family: var(--f-brush); font-size: calc(92px * var(--text-scale)); line-height: 1; color: var(--ink); opacity: .06; pointer-events: none; }
.sec:hover .sec-ch { opacity: .1; }
.sec-t { position: relative; font-weight: 600; font-size: calc(15px * var(--text-scale)); display: flex; align-items: baseline; gap: 8px; }
.sec-n, .tea-category > h2 .count { font-family: var(--f-display); font-size: calc(22px * var(--text-scale)); font-weight: 600; color: var(--muted); font-variant-numeric: lining-nums tabular-nums; margin-left: auto; }
.sec-d { position: relative; font-size: calc(13.5px * var(--text-scale)); color: var(--muted); max-width: 22ch; }
.sourcing { container-type: inline-size; }
.sourcing .eyebrow { margin-bottom: 8px; }
/* Quiet chart pigments; status text retains its readable semantic colors. */
.sourcing { --evidence-reviewed: #35694e; --evidence-sourced: #6686a8; --evidence-draft: #ad7b35; }
:root[data-theme="dark"] .sourcing { --evidence-reviewed: #60816c; --evidence-sourced: #687f8d; --evidence-draft: #9a8158; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sourcing { --evidence-reviewed: #60816c; --evidence-sourced: #687f8d; --evidence-draft: #9a8158; }
}
.sourcing .bar i + i { box-shadow: inset 2px 0 var(--surface); }
/* phone menu */
.menu-btn { display: none; align-items: center; gap: 8px; font: inherit; font-size: calc(15px * var(--text-scale)); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 7px 10px; cursor: pointer; }
.mb-ic { display: inline-flex; flex-direction: column; gap: 3px; } .mb-ic i { display: block; width: 14px; height: 1.5px; background: currentColor; }
.sheet { position: fixed; inset: 0; z-index: 20; background: color-mix(in srgb, var(--ink) 35%, transparent); padding: calc(env(safe-area-inset-top, 0px) + 66px) max(12px, env(safe-area-inset-right, 0px)) 12px max(12px, env(safe-area-inset-left, 0px)); overflow-y: auto; }
.sheet-in { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; }
.secs.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.secs.compact .sec { min-height: 76px; }
.secs.compact .sec-ch { font-size: calc(64px * var(--text-scale)); bottom: -10px; }
.sheet-foot { display: flex; gap: 18px; padding: 12px 4px 2px; font-size: calc(15px * var(--text-scale)); }
body.sheet-open { overflow: hidden; }
@media (max-width: 1100px) { .secs, .start-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .rail { display: none; }
  .menu-btn { display: inline-flex; }
  .hero { grid-template-columns: minmax(0, 1fr); padding: 22px 18px 58px; }
  .hero-art { position: absolute; top: 16px; right: 14px; opacity: .9; }
  .vert { font-size: calc(34px * var(--text-scale)); }
  .hero-seal { font-size: calc(13px * var(--text-scale)); padding: 4px 5px; }
  .hero-text { padding-right: 62px; }
}
@media (max-width: 440px) {
  /* narrow phones: the brush line runs across the top of the hero instead of down its side */
  .hero { padding-top: 18px; }
  .hero-text { padding-right: 0; }
  .hero-art { position: static; order: -1; align-items: center; gap: 10px; padding: 0; opacity: 1; }
  .vert { writing-mode: horizontal-tb; font-size: calc(30px * var(--text-scale)); letter-spacing: .04em; }
  .vert i { margin: 0 4px; }
  .hero-seal { margin-top: 0; }
  .hero { gap: 12px; }
  .secs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec { min-height: 112px; }
  .sec-ch { font-size: calc(76px * var(--text-scale)); }
  .start-qs { grid-template-columns: minmax(0, 1fr); }
  .start-cats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .start-cat { padding:12px; column-gap:8px; }
  .start-ch { font-size: calc(30px * var(--text-scale)); }
  .start-shelf { gap: 6px 20px; }
  .season { gap: 14px; padding: 14px; }
  .season-term { min-width: 64px; padding-right: 14px; }
  .season-term b { font-size: calc(32px * var(--text-scale)); }
}
.six { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.category-mobile-link { display:none; }
.cat.category-selected, .cat:target { border-color:color-mix(in srgb,var(--celadon) 55%,var(--line)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--celadon) 12%,transparent); }
@media(max-width:760px) { .category-desktop-link { display:none; } .category-mobile-link { display:inline; } }
.cat { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 14px 16px; display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 6px; }
@media (hover: hover) and (pointer: fine) {
  .six .cat:hover { background: color-mix(in srgb, var(--ink) 2%, var(--surface)); border-color: color-mix(in srgb, var(--line-strong) 40%, var(--line)); }
}
.cat-header { display: grid; grid-template-columns: minmax(0, 1fr) 56px; grid-template-rows: subgrid; grid-row: span 2; align-items: start; column-gap: 12px; margin-bottom: 4px; }
.cat-heading { display: contents; }
.cat-h { grid-column: 1; grid-row: 1; }
.cat-n { grid-column: 1; grid-row: 2; }
.cat-cup { grid-column: 2; grid-row: 1 / span 2; display: block; width: 56px; height: 56px; }
.cat-cup svg { display: block; }
.cat-cup .cup-reflection { opacity: .68; transform-origin: 18px 18px; transition: transform .38s ease, opacity .38s ease; }
.cat-cup .cup-surface-glint { opacity: .55; transform-origin: 24px 24px; transition: transform .38s ease, opacity .38s ease; }
@media (hover: hover) and (pointer: fine) {
  .cat:hover .cup-reflection { transform: translate(2.2px, 1.4px) scale(1.12); opacity: 1; }
  .cat:hover .cup-surface-glint { transform: rotate(8deg); opacity: 1; }
}
.cat:focus-within .cup-reflection { transform: translate(2.2px, 1.4px) scale(1.12); opacity: 1; }
.cat:focus-within .cup-surface-glint { transform: rotate(8deg); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .cat-cup :is(.cup-reflection,.cup-surface-glint) { transition: none; }
  .cat:is(:hover,:focus-within) :is(.cup-reflection,.cup-surface-glint) { transform: none; }
}
.cat-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cat-h .han { font-size: calc(26px * var(--text-scale)); font-weight: 700; line-height: 1.1; }
.cat-h .cat-pinyin { font-family: var(--f-display); font-style: italic; color: var(--muted); }
.cat :is(.cat-zh-link,.cat-title-link) { color: inherit; text-decoration: none; border-radius: 2px; }
.cat :is(.cat-zh-link,.cat-title-link):hover { color: var(--seal-text); }
.cat :is(.cat-zh-link,.cat-title-link):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.cat-n { font-weight: 600; }
.cat-name-note { display: block; margin-top: 3px; font-size: calc(14px * var(--text-scale)); font-weight: 400; line-height: 1.4; color: var(--muted); }
.cat-c { font-size: calc(13.5px * var(--text-scale)); color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.cat .sw { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--line); display: inline-block; }
.cat p { margin: 4px 0 0; font-size: calc(15px * var(--text-scale)); color: var(--muted); }
.oxbar { position: relative; height: 6px; border-radius: 99px; background: var(--line); margin-top: 4px; }
.oxbar i { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: var(--celadon); }
.oxbar.micro i { background: repeating-linear-gradient(90deg, var(--muted) 0 4px, transparent 4px 8px); }
.wheel-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; padding: 18px 4px 8px; margin-top: 14px; border-top: 1px solid var(--line); text-align: left; }
.wheel-legend > span { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: start; gap: 9px; min-width: 0; font-size: calc(14px * var(--text-scale)); line-height: 1.5; }
.wheel-legend > span > svg { margin-top: .4em; }
@media (max-width: 1050px) { .wheel-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; } }
@media (max-width: 540px) { .wheel-legend { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-inline: 4px; } }
/* the scale spans the whole card row: 0% under the first card's left edge, 100% under the last card's right edge */
.oxlegend { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 12px; margin-top: 8px; max-width: none; }
.oxlegend > span:first-child { justify-self: start; }
.oxlegend > span:last-child { justify-self: end; }
.lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.lane { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 12px 14px; min-width: 0; }
.lane h3 { font-family: var(--f-display); font-size: calc(17px * var(--text-scale)); margin-bottom: 6px; }
.doms { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.dom { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); text-decoration: none; }
.dom:hover { border-color: var(--line-strong); background: var(--wash); }
.dom b { text-transform: capitalize; font-weight: 600; } .dom .n { grid-row: 1; grid-column: 2; font-family: var(--f-mono); font-size: calc(13px * var(--text-scale)); color: var(--muted); }
.dom .han { grid-column: 1 / -1; font-size: calc(13.5px * var(--text-scale)); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.withic { display: inline-flex; align-items: center; gap: 7px; }
.ic { flex: none; display: inline-block; vertical-align: middle; }
.chip.withic { gap: 5px; }
.rail a .lbl { display: inline-flex; align-items: center; gap: 8px; }
.seal-mark { flex: none; display: inline-grid; place-items: center; font-family: var(--f-han); font-weight: 700; line-height: 1; color: var(--seal); border: 1.5px solid currentColor; border-radius: 3px; letter-spacing: 0; }
.seal-mark.sm { width: 22px; height: 22px; font-size: calc(14.5px * var(--text-scale)); }
.seal-mark.xs { width: 18px; height: 18px; font-size: calc(13px * var(--text-scale)); border-width: 1.25px; margin-right: 7px; vertical-align: middle; }
.eyebrow:has(> .seal-mark.xs), .grel-row > .shipreg { display: flex; align-items: center; gap: 7px; }
.eyebrow:has(> .seal-mark.xs) { flex-wrap: wrap; }
:is(.eyebrow, .grel-row > .shipreg, .crumbs) > .seal-mark.xs { margin-right: 0; }
.seal-mark.md { width: 30px; height: 30px; font-size: calc(18px * var(--text-scale)); margin-bottom: 8px; display: grid; }
.rail a .seal-mark { width: 1.3em; height: 1.3em; font-size: 1.2em; border-color: transparent; color: var(--muted); opacity: .75; font-family: var(--f-brush); font-weight: 400; font-size: calc(17px * var(--text-scale)); }
.rail a:hover .seal-mark { opacity: 1; color: var(--ink); }
.rail a[aria-current="page"] .seal-mark { opacity: 1; background: var(--rail-seal); color: var(--seal-ink); border-color: var(--rail-seal); }
.names-all summary { cursor: pointer; font-size: calc(14.5px * var(--text-scale)); color: var(--muted); }
.names-all summary:hover { color: var(--ink); }
.viz { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 10px 12px; }
.viz a circle { cursor: pointer; }
.viz a:hover circle, .viz a:focus circle { stroke: var(--ink); }
section > .filters { margin-top: -2px; }
.rend { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: calc(15px * var(--text-scale)); line-height: 1.55; }
.rend th, .rend td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rend th:nth-child(1) { width: 19%; }
.rend th:nth-child(2) { width: 36%; }
.rend th:nth-child(3) { width: 45%; }
.rend.rend-compact th:nth-child(2) { width:81%; }
.rend tbody tr:last-child td { border-bottom: 0; }
.rend th { font-size: calc(13px * var(--text-scale)); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.rend td.l { font-family: var(--f-body); font-size: calc(14px * var(--text-scale)); font-weight: 400; color: var(--muted); white-space: nowrap; }
.rend td { overflow-wrap: break-word; }
.rend td:not(.l) { min-width: 8ch; }
section:has(> .tbl > .rend) { container-type: inline-size; }
@container (max-width: 620px) {
  .tbl:has(.rend) { overflow: visible; border: 0; background: none; }
  .tbl table.rend { min-width: 0; }
  .rend thead { display: none; }
  .rend, .rend tbody, .rend tr, .rend td { display: block; width: 100%; }
  .rend tr { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 14px 16px; margin-bottom: 12px; }
  .rend tr:last-child { margin-bottom: 0; }
  .rend td { border: 0; padding: 3px 0; }
  .rend td.l { padding-bottom: 8px; }
  .rend .pref { font-size: calc(17px * var(--text-scale)); }
  .rend td[data-h]::before { content: attr(data-h); display: block; font-size: calc(13px * var(--text-scale)); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: 6px; }
  .rend td:empty { display: none; }
}
.rend .pref { font-weight: 500; font-size:calc(17px * var(--text-scale)); }
.rend .script-labels { display: flex; flex-wrap: wrap; gap: 3px 10px; }
@media (max-width: 600px) {
  .rend tr.script-row { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 4px 12px; align-items: baseline; padding-block: 12px; }
  .rend tr.script-row td { min-width: 0; padding: 0; }
  .rend tr.script-row td:last-child:not(:empty) { grid-column: 1 / -1; padding-top: 8px; }
}
.rend .render-strategy { margin-top:5px; color:var(--muted); font-size:calc(13px * var(--text-scale)); }
.rend .render-note + .render-note { margin-top:12px; }
.rend .render-label { display:block; margin-bottom:3px; color:var(--muted); font-size:calc(12.5px * var(--text-scale)); font-weight:600; }
.rend .render-variants { margin:0; padding:0; list-style:none; }
.rend .render-variants li + li { margin-top:4px; }
.rend [lang="zh-Hant"], .rend td.l[lang="zh-Hant"] { font-family: "Source Sans 3", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; }
.rend .av { color: var(--bad); text-decoration: line-through; text-decoration-thickness: 1px; }
.rend .why { color: var(--muted); font-size: calc(14px * var(--text-scale)); line-height: 1.55; margin-top: 5px; }
/* ---------- typesetting: line breaks in every script
   Chinese names come cut into .u units (hz() in the script); a unit never breaks, lines break between units.
   Headings balance their lines, prose avoids a lone last word or character, German and Russian hyphenate
   prose (and long headings), pinyin and English names never hyphenate. */
.u { white-space: nowrap; }
:lang(zh) { line-break: strict; }
h1, h2, h3, .row .t, .group-h .gt, .sec-t, .start-q b, .start-cat b, .cat-n, .lane h3, .season-term span { text-wrap: balance; }
p, .lead, .note, dd, li, .row .s, .sec-d, .start-q-d, .start-intro, .alm-n, .cat p, .why, .season-now { text-wrap: pretty; }
h1, h2, h3 { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; }
:root:lang(de) :is(h1, h2, h3), :root:lang(ru) :is(h1, h2, h3) { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }
:root:lang(de) :is(p, .lead, .note, dd, td, li, .row .s, .sec-d, .alm-n, .why, .cat-n, .sec-t, .start-q-d, .start-intro, .ag-h, dt, .season-now),
:root:lang(ru) :is(p, .lead, .note, dd, td, li, .row .s, .sec-d, .alm-n, .why, .cat-n, .sec-t, .start-q-d, .start-intro, .ag-h, dt, .season-now) { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 3 3; }
/* proper names never hyphenate: vendors, products, entries, pinyin */
[lang="zh-Latn"], .pinyin, .row .t, .alm-m i, code, .tbl a, .facts a, .chip, .group-h .gt { hyphens: manual !important; -webkit-hyphens: manual !important; }
/* Latin inside a Chinese page (English names, pinyin) keeps the Western display face */
:root:lang(zh) [lang="en"], :root:lang(zh) [lang="zh-Latn"] { --f-display: "Cormorant Garamond", "Noto Serif SC", Georgia, serif; }
:root:lang(zh) .titles h1[lang="en"] { font-size: calc(36px * var(--text-scale)); line-height: 1.08; letter-spacing: 0; }
/* headline punctuation set half-width (標點擠壓), so （青茶） and · do not open holes in a name */
.glyphs, .row .h, .group-h .han, .cat-h .han, .alm-zh { font-feature-settings: "halt"; }
.alm-zh, .season-term b, .jieqi b { white-space: nowrap; }
/* Page navigation renders directly, without a transient fade or tap highlight. */
/* site footer: one quiet line of ownership and version, one of licence and source links */
.site-foot { border-top: 1px solid var(--line); margin-top: 8px; }
.foot-in { max-width: 1120px; margin: 0 auto; padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; font-size: calc(13px * var(--text-scale)); line-height: 1.5; color: var(--muted); }
@media (min-width: 761px) { .foot-in { padding-left: calc(16px + 190px + 40px); } }
.foot-in p { margin: 0; }
.foot-src a { color: var(--muted); margin-left: 10px; text-decoration: underline 1px var(--line-strong); text-underline-offset: 3px; }
.foot-src a:hover { color: var(--ink); text-decoration-color: currentColor; }
/* shipping markets (lib/markets.js): the ships-to menu, region-grouped market lists */
.mkt { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.mkt > span { font-size: calc(13.5px * var(--text-scale)); color: var(--muted); }
.mkt select { font: 500 calc(14px * var(--text-scale))/1.3 var(--f-body); color: var(--ink); background-color: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r); padding: 6px 30px 6px 10px; max-width: 100%;
  appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.mkt select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shown-of { margin: 0 0 10px; }
.lt .ship-check { display:inline-flex; margin:4px 0 0; padding:2px 8px; border:1px solid var(--line-strong); border-radius:999px; background:transparent; color:var(--muted); white-space:nowrap; overflow-wrap:normal; cursor:help; }
.shiptag b { display: inline-flex; align-self: stretch; align-items: center; font-weight: 600; padding-left: 6px; border-left: 1px solid var(--line); font-variant-numeric: tabular-nums; line-height: 1.1; }
.shiplist { display: grid; gap: 6px; container-type: inline-size; min-width: 0; }
.shiprow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 4px 12px; align-items: baseline; }
.shiprow > .chips { min-width:0; }
.shiprow .shiptag { max-width:100%; white-space:normal; overflow-wrap:break-word; }
@container (max-width:400px) { .shiprow { grid-template-columns:minmax(0,1fr); } }
.shipreg { font-size: calc(13px * var(--text-scale)); color: var(--muted); }
@media (max-width: 520px) { .shiprow { grid-template-columns: 1fr; } }
/* derived facts (lib/insights.js): price position, session cost, batch reading, price-in-context strip */
.pos { display: inline-block; margin-left: 8px; padding: 0 6px; border-radius: var(--r); font: 500 calc(12.5px * var(--text-scale))/1.5 var(--f-body); white-space: nowrap; vertical-align: 1px; border: 1px solid var(--line); color: var(--muted); background: var(--surface); }
.pos-lowest, .pos-low { color: var(--celadon); border-color: color-mix(in srgb, var(--celadon) 45%, transparent); background: none; }
.pos-highest, .pos-high { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: none; }
.sess { margin-top: 2px; font-size: calc(13px * var(--text-scale)); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ok-mark { color: var(--celadon); white-space: nowrap; }
.ctx-lead { max-width:none; margin:0 0 16px; text-wrap:wrap; }
.ctx-facts { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 20px; margin-bottom:16px; font:400 calc(14px * var(--text-scale))/1.6 var(--f-body); font-variant-numeric:tabular-nums; }
.ctx-facts > span { min-width:0; max-width:100%; text-wrap:wrap; overflow-wrap:break-word; }
.ctx-median-summary { font-weight:500; }
.ctx-median-reference { color:var(--muted); font-weight:400; }
.ctx-facts .pos { margin:0; font-size:inherit; line-height:inherit; padding:2px 9px; white-space:normal; }
.ctx-strip { padding: 4px 0; }
.ctx-strip .viz .chart.ctx-price-chart { overflow: hidden; margin-inline: auto; }
/* the chart's own marks: faint gridlines, a firm axis, the median and the middle half behind the dots */
.ctx-price-chart .ctx-band { fill: var(--ink); fill-opacity: .055; }
.ctx-price-chart .ctx-grid, .ctx-ticks .ctx-grid { stroke: var(--line); }
.ctx-price-chart :is(.ctx-axis, .ctx-tick), .ctx-ticks .ctx-tick { stroke: var(--line-strong); }
.ctx-ticks .ctx-tl { fill: var(--muted); }
.ctx-price-chart .ctx-median { stroke: var(--ink); stroke-width: 1.25; stroke-dasharray: 3 3; }
.ctx-price-chart .ctx-base { stroke: var(--line-strong); }
.ctx-price-chart .ctx-span { fill: none; stroke: var(--muted); stroke-width: 1; }
.ctx-price-chart .ctx-refmid { fill: var(--surface); stroke: var(--info); stroke-width: 1.5; }
.ctx-price-chart .ctx-bar { fill: var(--muted); fill-opacity: .38; }
.ctx-price-chart .ctx-bar.in { fill-opacity: .62; }
.ctx-price-chart .ctx-bar.me { fill: var(--accent); fill-opacity: .9; }
.ctx-price-chart .ctx-bar:hover { fill-opacity: .85; }
.ctx-note { margin: 6px 0 0; font-size: calc(13px * var(--text-scale)); color: var(--muted); max-width: 70ch; }
.ctx-price-chart .ctx-focal-rule { stroke: var(--accent); stroke-width: 1.25; stroke-opacity: .55; }
.ctx-price-chart text { font-size: calc(12px * var(--text-scale)); fill: var(--muted); }
.ctx-price-chart.cmp text { font-size: calc(13px * var(--text-scale)); }
.ctx-price-chart text.ctx-fl { font-size: calc(13px * var(--text-scale)); fill: var(--ink); }
.ctx-price-chart.cmp text.ctx-fl { font-size: calc(14px * var(--text-scale)); }
.ctx-price-chart text.ctx-cap { font-size: calc(11.5px * var(--text-scale)); }
.ctx-price-chart.cmp text.ctx-cap { font-size: calc(12px * var(--text-scale)); }
.ctx-price-chart a:is(:hover, :focus-visible, .on) :is(circle, rect), .price-chart a:is(:hover, :focus-visible, .on) :is(circle, rect, path) { stroke: var(--ink); stroke-width: 1.75; }
/* names the listing a tapped dot (touch) or a focused dot (keyboard) stands for */
.ctx-readout { display: none; margin: 6px 0 0; font-size: calc(14px * var(--text-scale)); line-height: 1.5; overflow-wrap: anywhere; }
.ctx-readout.on { display: block; }
@media (pointer: coarse) { .ctx-readout { display: block; min-height: 3em; visibility: hidden; } .ctx-readout.on { visibility: visible; } }
.ctx .legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: calc(13px * var(--text-scale)); color: var(--muted); margin-top: 4px; }
/* ---------- readability: CJK meta text a step larger (13px hanzi close up) */
:is(:root:lang(zh-Hans), :root:lang(zh-Hant)) :is(.path, .ag-h, .legend, .foot-in, .shipreg, .sess, .alm-d, .alm-n, .alm-m i, .sec-d, .cat-c, .start-q-d, .start-n, .start-intro, .stats span, .season-term span, .why, .eyebrow, .claim, .mt, .pos, .shiptag, .tbl th, .rend th) { font-size: calc(14px * var(--text-scale)); letter-spacing: 0; }
.eyebrow { hyphens: manual !important; -webkit-hyphens: manual !important; }
:root:lang(de) .steps strong, :root:lang(ru) .steps strong { hyphens: auto; -webkit-hyphens: auto; }
/* ---------- touch: every control at least 44px on phones and coarse pointers */
@media (max-width: 760px), (pointer: coarse) {
  .theme-btn { width: var(--tap); height: var(--tap); }
  /* the menu button keeps its label where there is room, so it sizes to fit and is never narrower than a tap */
  .menu-btn { width: auto; min-width: var(--tap); height: var(--tap); justify-content: center; }
  .lang select, .mkt select { min-height: var(--tap); }
  .search input { min-height: var(--tap); font-size: calc(16px * var(--text-scale)); }
  .seg button { min-height: var(--tap); padding-inline: 14px; font-size: calc(14.5px * var(--text-scale)); }
  .filters { gap: var(--s3) var(--s5); }
  .sheet .sec { min-height: 64px; }
  .sheet-foot a { display: inline-flex; align-items: center; min-height: var(--tap); }
  .foot-src a { display: inline-block; padding-block: 10px; margin-block: -10px; }
}
@media (max-width: 640px) {
  .top-in { gap: 8px; }
  .filters > span, .mkt { width: 100%; }
  .mkt select { flex: 1; }
}
@media (max-width: 379px) { .top-in { gap: 8px 5px; } .theme-btn { width: 42px; height: 42px; } .menu-btn { min-width: 42px; height: 42px; } .brand { gap: 6px; } }
/* ---------- motion */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
/* ---------- print: entry pages are cited, so print the entry, its facts and its sources with their addresses */
@media print {
  @page { margin: 16mm 14mm; }
  :root, :root[data-theme="dark"] { --bg: #fff; --surface: #fff; --wash: #fff; --ink: #000; --muted: #444; --line: #bbb; --line-strong: #888; --accent: #000; color-scheme: light; }
  body { font-size: 10.5pt; line-height: 1.5; }
  .top, .rail, .sheet, .skip, .menu-btn, .filters, .shown-of, .names-all summary, .theme-btn, .table-scroll-hint, body::before { display: none !important; }
  .shell { display: block; max-width: none; padding: 0; }
  main > * { animation: none !important; }
  a { color: #000; text-decoration: none; }
  .src a[href^="http"]::after, .facts a[href^="http"]::after { content: " <" attr(href) ">"; font-size: 8.5pt; color: #444; overflow-wrap: anywhere; }
  .row, .src, .tbl tr, .facts dd, .amb article, .lane, .cat { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  .tbl { overflow: visible; } .tbl table { min-width: 0; }
  .site-foot { border-top: 1px solid #888; } .foot-in { padding: 8pt 0 0; } .foot-src a { display: none; }
}
/* not-found page: the empty-state look, the asked-for address, nearest pages, next steps */
.nf { max-width: 70ch; padding-block: 0 var(--s6); gap: 24px; }
.nf .state-mark { font-size: calc(56px * var(--text-scale)); line-height: 1.1; }
.nf h1 { margin-top: 4px; }
.nf .lead { margin-top: 12px; }
.nf .nf-path { font-family: var(--f-mono); font-size: .9em; padding: 1px var(--s1); border: 1px solid var(--line); border-radius: 3px; overflow-wrap: anywhere; color: var(--ink); }
.nf section { width: 100%; }
.nf-next { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); padding-top: var(--s3); border-top: 1px solid var(--line); width: 100%; }
.nf-next a { display: inline-flex; align-items: center; min-height: var(--tap); }
/* learn guides: numbered cards on the hub; on a guide page key-fact tiles, a contents list,
   sections numbered 一 二 三, numbered source references */
.gcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; border-top: 0; }
/* Native disclosure keeps every guide link in HTML and works without JavaScript. */
.guide-more { margin-top: 12px; scroll-margin-top: 110px; }
.guide-more > summary { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r); color: var(--muted); font-size: calc(14px * var(--text-scale)); line-height: 1.4; cursor: pointer; list-style: none; }
.guide-more > summary::-webkit-details-marker { display: none; }
.guide-more > summary::after { content: '+'; flex: none; font-size: 18px; font-weight: 400; line-height: 1; }
.guide-more[open] > summary::after { content: '−'; }
.guide-more .guide-less, .guide-more[open] .guide-all { display: none; }
.guide-more[open] .guide-less { display: inline; }
.guide-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.guide-more > .gcards { margin-top: 12px; }
@media (hover: hover) { .guide-more > summary:hover { color: var(--ink); background: var(--wash); border-color: var(--line-strong); } }
.gcard { display: grid; grid-template-columns: 2.6em 1fr; gap: var(--s3); padding: var(--s4) 16px; border: 1px solid color-mix(in srgb, var(--line) 78%, transparent); border-radius: 8px; color: var(--ink); text-decoration: none; min-height: var(--tap); transition: background-color 180ms ease, box-shadow 180ms ease; }
.gcard:is(:hover, :focus-visible) { color: var(--ink); text-decoration: none; }
.gcard:focus-visible { background: var(--wash); box-shadow: inset 0 0 0 1px var(--line-strong); outline: 2px solid var(--accent); outline-offset: 2px; }
.gcard:focus-visible .gt { color: var(--accent); }
.gcard .gnum { position: relative; align-self: start; transition: color 180ms ease; }
.gcard .gnum::after { content: ''; position: absolute; left: 2px; top: 40px; width: 16px; height: 12px; background: currentColor; clip-path: polygon(0 44%, 80% 44%, 53% 9%, 60% 0, 100% 50%, 60% 100%, 53% 91%, 80% 56%, 0 56%); opacity: 0; transform: translateX(-3px); transition: opacity 180ms ease, transform 180ms ease; pointer-events: none; }
.gcard .gzh { transition: color 180ms ease; }
.gcard:focus-visible .gnum::after { opacity: .7; transform: translateX(0); }
.gcard:focus-visible .gzh { color: color-mix(in srgb, var(--muted) 75%, var(--ink)); }
.gcard:focus-visible .gnum { color: var(--seal-text); }
@media (hover: hover) {
  .gcard:hover { background: var(--wash); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-strong) 85%, var(--seal-text)); }
  .gcard:hover .gt { color: var(--accent); }
  .gcard:hover .gnum::after { opacity: .7; transform: translateX(0); }
  .gcard:hover .gzh { color: color-mix(in srgb, var(--muted) 75%, var(--ink)); }
  .gcard:hover .gnum { color: var(--seal-text); }
}
.gcard:active { background: var(--wash); box-shadow: inset 0 0 0 1px var(--line-strong); }
@media (prefers-reduced-motion: reduce) { .gcard, .gcard .gt, .gcard .gnum, .gcard .gnum::after, .gcard .gzh { transition: none; } }
.gnum { font-family: var(--f-display); font-size: calc(26px * var(--text-scale)); line-height: 1; color: var(--line-strong); font-variant-numeric: lining-nums; padding-top: 2px; }
.gcard.first .gnum { color: var(--seal); }
.gbody { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.gzh { font-family: var(--f-han, var(--f-display)); font-size: calc(15px * var(--text-scale)); color: var(--muted); letter-spacing: .04em; }
.gt { font-family: var(--f-display); font-size: calc(21px * var(--text-scale)); line-height: 1.2; font-weight: 600; transition: color .15s; }
.gs { font-size: calc(16px * var(--text-scale)); line-height: 1.6; color: color-mix(in srgb, var(--ink) 80%, var(--muted)); text-wrap: pretty; }
.gm { font-size: calc(13px * var(--text-scale)); color: var(--muted); margin-top: 2px; }
.gm b { color: var(--seal); font-weight: 600; }
.guide { --measure: 100%; max-width: 46rem; }
.gzh-big { font-family: var(--f-brush); font-size: calc(clamp(30px, 24px + 1.6vw, 44px) * var(--text-scale)); line-height: 1.1; color: var(--seal); letter-spacing: .06em; }
.guide .lead { max-width: var(--measure); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.kf { padding: var(--s3) var(--s3) var(--s3) 0; border-bottom: 1px solid var(--line); }
.kl { font-size: calc(13px * var(--text-scale)); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
:root:lang(zh-Hans) .kl, :root:lang(zh-Hant) .kl { text-transform: none; letter-spacing: .12em; }
.kv { font-family: var(--f-display); font-size: calc(19px * var(--text-scale)); line-height: 1.35; margin-top: 2px; font-variant-numeric: lining-nums tabular-nums; }
.gtoc { border-left: 2px solid var(--seal); padding: var(--s1) 0 var(--s1) var(--s4); }
.gtoc ol { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: 2px; }
.gtoc a { display: flex; gap: var(--s3); align-items: baseline; min-height: 32px; color: var(--ink); text-decoration: none; font-size: calc(15px * var(--text-scale)); }
.gtoc a span { font-family: var(--f-han, var(--f-display)); color: var(--seal); min-width: 2em; }

.gsec { scroll-margin-top: 96px; }
.gsec h2 { display: flex; align-items: baseline; gap: var(--s3); }
.gsn { flex: none; font-family: var(--f-brush); font-size: 1.15em; color: var(--seal); font-weight: 400; min-width: 1.6em; white-space: nowrap; word-break: keep-all; overflow-wrap: normal; }
.gsec p { max-width: var(--measure); font-size: calc(var(--fs-body) * var(--text-scale)); line-height: var(--lh-body); margin: 0 0 var(--s3); }
.cites { display: inline-flex; flex-wrap: wrap; gap: 4px; font-size: calc(13px * var(--text-scale)); }
.cite { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); text-decoration: none; font-variant-numeric: tabular-nums; }
.cite:hover, .cite:focus-visible { color: var(--accent); border-color: var(--accent); }
.gtable { width: 100%; border-collapse: collapse; font-size: calc(15px * var(--text-scale)); overflow-wrap: normal; word-break: normal; hyphens: none; line-break: strict; }
.guide-comparison .table-scroll-hint { display: none; color: var(--muted); font-size: calc(14px * var(--text-scale)); line-height: 1.5; margin: 0 0 10px; }
.guide-comparison > .tbl:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.guide-comparison.is-overflowing .table-scroll-hint { display: block; }
.guide-comparison > h2 { display: block; margin: 0 0 12px; padding: 0; border: 0; font-family: var(--f-body); font-size: calc(16px * var(--text-scale)); font-weight: 500; line-height: 1.5; text-wrap: balance; }
.guide-comparison > .tbl { border-top: 1px solid var(--line); }
.guide-comparison > .cites { margin-top: 12px; }
.term-annotation { white-space: nowrap; }
.category-comparison .gtable { table-layout: auto; overflow-wrap: normal; hyphens: none; }
.category-comparison .gtable th:first-child { min-width: 9em; }
.category-comparison .gtable td { line-height: 1.6; word-break: normal; }
.category-comparison .gtable th:nth-child(2) { width: 24%; }
.category-comparison .gtable th:nth-child(3) { width: 25%; }
@media (max-width: 760px) {
 .category-comparison > .tbl { border: 0; }
 .category-comparison .gtable, .category-comparison tbody { display: block; min-width: 0; }
 .category-comparison thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
 .category-comparison tr { display: block; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 12px; }
 .category-comparison .gtable :is(th,td) { display: block; width: auto; border: 0; padding: 0; }
 .category-comparison .gtable tbody th { font-size: calc(18px * var(--text-scale)); margin-bottom: 12px; }
 .category-comparison .gtable td + td { margin-top: 12px; }
 .category-comparison td::before { content: attr(data-column); display: block; color: var(--muted); font-size: calc(13px * var(--text-scale)); margin-bottom: 3px; }
}
.guide-facts > .kfacts { border: 0; }
.guide-facts { container-type: inline-size; }
.guide-facts > .kfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.guide-facts .kf { display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: 8px; min-width: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.guide-facts .kl { font-size: calc(14.5px * var(--text-scale)); font-weight: 600; line-height: 1.45; letter-spacing: 0; text-transform: none; }
.guide-facts .kv { margin: 0; font-family: var(--f-body); font-size: calc(17px * var(--text-scale)); line-height: 1.55; overflow-wrap: anywhere; }
.guide-facts .kv a { white-space: normal; }
.guide-facts .kf-sources { align-self: end; }
.guide-facts .kf-sources:empty { display: none; }
@container (max-width: 520px) {
  .guide-facts > .kfacts { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .guide-facts .kf { grid-template-rows: auto; grid-row: auto; padding: 16px; }
}
.gtable th, .gtable td { text-align: left; vertical-align: top; padding: 12px; border-bottom: 1px solid var(--line); }
.gtable thead th { font-size: calc(13px * var(--text-scale)); color: var(--muted); font-weight: 600; white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; border-bottom: 1px solid var(--line-strong); }
.gtable thead th.compact-heading { white-space: nowrap; }
.gtable thead th { text-wrap: pretty; letter-spacing: .04em; }
.gtable tbody th { font-size: inherit; font-weight: 500; color: var(--ink); text-transform: none; letter-spacing: normal; white-space: normal; }
.weighting-comparison .gtable th:first-child { width: 36%; min-width: 14em; }
.weighting-comparison .gtable td { font-variant-numeric: tabular-nums; }
.history-comparison .gtable th:first-child { width: 16%; min-width: 8.5em; }
/* Short water-temperature phrases should stay readable inside the scrollable table. */
.brewing-comparison .gtable :is(th,td):nth-child(3) { white-space: nowrap; }
.period-name, .period-dates { display: block; }
.period-dates { margin-top: 2px; color: var(--muted); font-weight: 400; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Regional vocabulary is reading content, not compact table metadata. */
.local-words-wrap { margin-top: 12px; container-type: inline-size; }
.tbl table.local-words { min-width: 0; table-layout: fixed; font-size: calc(16px * var(--text-scale)); line-height: 1.65; }
.local-words th:first-child { width: 28%; }
.local-words th:nth-child(2) { width: 22%; }
.local-words :is(th, td) { padding: 16px 12px; white-space: normal; overflow-wrap: anywhere; }
.tbl .local-words tbody th { color: var(--ink); font-size: inherit; text-transform: none; letter-spacing: normal; }
.local-words tbody .han { font-size: calc(20px * var(--text-scale)); line-height: 1.4; }
.local-words em { display: block; margin-top: 4px; font-size: calc(15px * var(--text-scale)); font-style: normal; font-weight: 400; color: var(--muted); hyphens: manual; }
.local-words .srcchip-label { text-decoration: underline 1px dotted var(--line-strong); text-underline-offset: 3px; }
.srcchip:hover .srcchip-label { text-decoration-color: currentColor; }
.srcchip { display: inline; white-space: normal; overflow-wrap: anywhere; }
@container (max-width: 620px) {
  .local-words thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .local-words, .local-words tbody { display: block; width: 100%; }
  .local-words tr { display: grid; grid-template-columns: minmax(0,1fr); padding: 18px 12px; border-bottom: 1px solid var(--line); }
  .local-words tr:last-child { border-bottom: 0; }
  .local-words :is(th, td) { display: block; width: auto; padding: 0; border: 0; }
  .local-words .local-dialect { margin: 6px 0 10px; color: var(--muted); font-size: calc(15px * var(--text-scale)); }
}

.grel { display: grid; gap: var(--s2); }
.grel-row { display: grid; grid-template-columns: minmax(7.5em, max-content) 1fr; gap: var(--s1) var(--s3); align-items: start; }
.grel-row > .shipreg { min-height: calc(21.75px * var(--text-scale) + 6px); line-height: 1.4; }
@media (max-width: 520px) { .grel-row { grid-template-columns: 1fr; } }
.gpn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gpn a { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 18px 20px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); text-decoration: none; color: var(--ink); min-width: 0; min-height: 96px; }
.gpn a > span { display: inline-flex; align-items: center; gap: 8px; font-size: calc(14px * var(--text-scale)); font-weight: 600; color: var(--seal-text); }
.gpn a b { font-family: var(--f-display); font-size: calc(26px * var(--text-scale)); font-weight: 600; line-height: 1.25; }
.gpn a:hover { border-color: var(--seal-text); background: var(--wash); }
.gpn a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gpn .next { text-align: right; align-items: flex-end; }
.gpn > a:only-child { grid-column: 1 / -1; }
.grefs { margin: 0; padding-left: 1.6em; display: grid; gap: var(--s2); font-size: calc(14.5px * var(--text-scale)); }
.grefs li:target { background: var(--accent-soft); outline: 4px solid var(--accent-soft); }
/* regional depth: plain maps, altitude bars, the picking ribbon, timelines, source chips */
.sec-lead { margin: 0 0 var(--s3); max-width: 70ch; }
.rmap svg, .viz svg { overflow: visible; }
.grat { stroke: var(--line); stroke-width: 1; }
.gratl { font-size: calc(13px * var(--text-scale)); fill: var(--muted); font-variant-numeric: tabular-nums; }
.sbar { stroke: var(--ink); stroke-width: 1.5; }
.pt { fill: var(--ink); fill-opacity: .55; }
.pt-me { fill: var(--seal); stroke: var(--bg); stroke-width: 2; }
.pt-halo { fill: none; stroke: var(--seal); stroke-opacity: .35; stroke-width: 1.5; }
.viz a, .rmap a { text-decoration: none; }
.ptl { font-size: calc(13px * var(--text-scale)); fill: var(--ink); }
.ptl-me { font-size: calc(14px * var(--text-scale)); font-weight: 600; fill: var(--seal); }
a:hover > .pt { fill: var(--accent); fill-opacity: 1; }
a:hover > .ptl { fill: var(--accent); }
.bar { fill: var(--celadon); fill-opacity: .55; }
.bar-me { fill: var(--seal); }
.alt-row { fill: transparent; }
.alt-chart a:is(:hover, :focus-visible) .alt-row { fill: var(--wash); }
.alt-chart a:is(:hover, :focus-visible) .ptl, .alt-chart a:is(:hover, :focus-visible) .alt-value { fill: var(--accent); }
.alt-value { font-variant-numeric: tabular-nums; }
.regions-viz .sec-lead { font-size: calc(15px * var(--text-scale)); line-height: 1.6; }
.regions-viz .grat { stroke-opacity: .65; vector-effect: non-scaling-stroke; }
.regions-viz .viz { padding: 14px 12px; }
.regions-viz a:focus-visible > .pt { fill: var(--accent); fill-opacity: 1; stroke: var(--accent); stroke-width: 2; }
.regions-viz a:focus-visible > .ptl { fill: var(--accent); }
a:hover > .bar { fill-opacity: .9; }
.season-spring { fill: var(--celadon); fill-opacity: .8; }
.season-summer { fill: var(--celadon); fill-opacity: .45; }
.season-autumn { fill: var(--accent); fill-opacity: .5; }
.season-winter { fill: var(--muted); fill-opacity: .45; }
.today { stroke: var(--seal); stroke-width: 1.5; stroke-dasharray: 3 3; }
.todayl { font-size: calc(13px * var(--text-scale)); fill: var(--seal); }
.kfs { margin-top: 4px; }
.kv a { white-space: nowrap; }
.srcchip { display: inline-flex; align-items: baseline; gap: 3px; font-size: calc(12.5px * var(--text-scale)); line-height: 1.5; color: var(--muted); text-decoration: none; border-bottom: 0; white-space: normal; max-width: 100%; overflow: visible; vertical-align: baseline; }
.srcchip-label { min-width: 0; overflow-wrap: break-word; text-decoration: underline 1px dotted var(--line-strong); text-underline-offset: .2em; }
.srcchip .link-arrow { flex: none; width: 12px; height: 12px; align-self: center; }
.srcchip:hover { color: var(--accent); border-bottom-color: currentColor; }
.tline { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line-strong); }
.tline li { display: grid; grid-template-columns: 5.5em 1fr; gap: var(--s3); padding: var(--s2) 0 var(--s2) var(--s4); position: relative; }
.tline li::before { content: ''; position: absolute; left: -4px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--seal); }
.ty { font-family: var(--f-display); font-size: calc(17px * var(--text-scale)); font-variant-numeric: lining-nums tabular-nums; color: var(--ink); }
.te { line-height: 1.55; }
/* contact page and the footer link to it */
.foot-contact { margin: 0; }
.foot-contact a { color: var(--ink); text-decoration: underline 1px var(--line-strong); text-underline-offset: 3px; }
.foot-contact a:hover { color: var(--accent); text-decoration-color: currentColor; }
.contact { max-width: 46rem; }
.ct-who { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); border-top: 1px solid var(--line); }
.ct-card { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); padding: var(--s4) var(--s3) var(--s4) 0; border-bottom: 1px solid var(--line); }
.ct-card h3 { margin: 0 0 2px; font-size: calc(17px * var(--text-scale)); }
.ct-card p, .ct-p { margin: 0; color: var(--muted); line-height: 1.55; max-width: var(--measure); }
/* contact: the form box */
.contact [hidden] { display: none !important; }
.ct-layout { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: flex-start; }
.ct-box { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: clamp(16px, 3vw, 28px); min-width: 0; box-sizing: border-box; }
:root:root .contact .ct-box h2 { font-family: var(--f-body); font-size: calc(19px * var(--text-scale)); font-weight: 600; line-height: 1.35; margin: 0 0 var(--s4); padding: 0; border: 0; text-wrap: pretty; }
.ct-main { flex: 1 1 26rem; }
.ct-aside-links { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: var(--s2); }
.ct-aside-links a { display: inline-flex; align-items: center; min-height: 44px; }
.ct-form { display: grid; gap: var(--s4); }
.ct-field { display: grid; gap: 6px; align-content: start; position: relative; min-width: 0; }
.ct-field label { font-size: calc(14px * var(--text-scale)); font-weight: 500; color: var(--ink); }
.ct-opt { font-weight: 400; color: var(--muted); }
.ct-form input, .ct-form textarea { font: inherit; font-size: calc(16px * var(--text-scale)); color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r); padding: 10px 12px; min-height: var(--tap); transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease; }
.ct-form textarea { min-height: 9.5rem; resize: vertical; line-height: 1.55; }
.ct-form input:hover, .ct-form textarea:hover { border-color: var(--muted); }
.ct-form input:focus-visible, .ct-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.ct-form [aria-invalid="true"] { border-color: var(--accent); background: var(--accent-soft); }
.ct-form[data-state="sending"] :is(input, textarea) { opacity: .7; }
.ct-fielderr { margin: 0; color: var(--accent); font-size: calc(14px * var(--text-scale)); line-height: 1.45; }
.ct-count { justify-self: end; font-size: calc(12.5px * var(--text-scale)); color: var(--muted); font-variant-numeric: tabular-nums; }
.ct-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.ct-send { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--tap); min-width: 11rem; padding: 0 22px; font: inherit; font-size: calc(16px * var(--text-scale)); font-weight: 600; color: var(--bg); background: var(--accent); border: 1px solid var(--accent); border-radius: var(--r); cursor: pointer; transition: filter .16s ease, opacity .16s ease; }
.ct-send:hover { filter: brightness(1.08); }
.ct-send:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ct-send[aria-busy="true"] { cursor: progress; filter: none; opacity: .9; }
.ct-status { flex: 1 1 14rem; margin: 0; color: var(--accent); font-size: calc(15px * var(--text-scale)); line-height: 1.5; }
.ct-spin { width: 16px; height: 16px; flex: none; box-sizing: border-box; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ct-spin .8s linear infinite; }
@keyframes ct-spin { to { transform: rotate(360deg); } }
@keyframes ct-pulse { 50% { opacity: .3; } }
@keyframes ct-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ct-done { display: grid; justify-items: start; gap: var(--s3); padding: var(--s3) 0; animation: ct-rise .4s ease both; outline: none; }
:root:root .contact .ct-done h2, .ct-done p { margin: 0; }
.ct-done p { color: var(--muted); line-height: 1.6; max-width: 40ch; }
.ct-done-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--celadon); border: 1px solid var(--celadon); background: var(--wash); }
.ct-again { margin-top: var(--s2); min-height: 44px; padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: var(--r); color: var(--ink); background: var(--surface); font: inherit; font-size: calc(15px * var(--text-scale)); cursor: pointer; }
.ct-again:hover, .ct-again:focus-visible { background: var(--wash); border-color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .ct-spin { animation: ct-pulse 1.6s ease-in-out infinite; border-right-color: currentColor; } .ct-done { animation: none; } .ct-form input, .ct-form textarea, .ct-send { transition: none; } }
.ct-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--s4); }
/* dropdowns: one compact chevron for every select (language, ships to, contact), drawn in the
   text colour so it follows the theme; it sits a fixed 12px from the edge, close to the label */
/* a thin chevron in the muted text colour, one per theme */
:root { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235d5850' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a9a297' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } }
:root[data-theme="dark"] { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a9a297' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lang select, .mkt select, .ct-form select { appearance: none; -webkit-appearance: none; padding-right: 28px;
  background-image: var(--chev); background-position: right 11px center; background-size: 10px 6px; background-repeat: no-repeat; cursor: pointer; }
.lang select { padding-left: 10px; }
@media (max-width: 640px) { .lang select { padding-left: 8px; padding-right: 24px; background-position: right 9px center; } }
.mkt select { width: auto; }
@media (max-width: 640px) { .mkt select { width: auto; flex: 0 1 auto; } }
/* audit A1/A2: grid tracks never grow past the column; long source titles and codes break */
.tline li { grid-template-columns: 5.5em minmax(0, 1fr); }
.te, .tline li > * { min-width: 0; }
.te .srcchip { white-space: normal; overflow-wrap: anywhere; }
.check-list li > span:last-child { overflow-wrap: anywhere; min-width: 0; }
/* audit A3: on short screens the header scrolls away instead of covering a quarter of the view */
@media (max-height: 560px) { .top { position: static; } }
/* charts: a wide and a compact drawing; the container decides (audit D1); a table alternative (D6) */
.dual { container-type: inline-size; }
.dv-compact { display: none; }
@container (max-width: 560px) { .dv-wide { display: none; } .dv-compact { display: block; } }
.viz .chart { overflow: visible; }
.chart.cmp .gratl { font-size: calc(13px * var(--text-scale)); } .chart.cmp .ptl { font-size: calc(14px * var(--text-scale)); } .chart.cmp .ptl-me { font-size: calc(15px * var(--text-scale)); } .chart.cmp .todayl { font-size: calc(13px * var(--text-scale)); }
.as-table { margin-top: var(--s2); }
.as-table summary { cursor: pointer; font-size: calc(13.5px * var(--text-scale)); color: var(--muted); min-height: var(--tap); display: inline-flex; align-items: center; }
.as-table summary:hover { color: var(--accent); }
.as-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.as-table { container-type: inline-size; }
@container (max-width: 600px) {
  .as-table .tbl { border: 0; }
  .as-table .gtable, .as-table tbody { display: block; min-width: 0; }
  .as-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .as-table tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .as-table tr:first-child { border-top: 1px solid var(--line); }
  .as-table .gtable :is(th, td) { display: block; width: auto; padding: 0; border: 0; overflow-wrap: normal; }
  .as-table .gtable tbody th { margin-bottom: 10px; }
  .as-table .gtable td + td { margin-top: 8px; }
  .as-table td::before { content: attr(data-column); display: block; color: var(--muted); font-size: calc(13px * var(--text-scale)); margin-bottom: 2px; }
}
.legend svg { flex: none; }
/* price-position badges: neutral when high, celadon when low (audit D4) */
.pos-highest, .pos-high { color: var(--ink); border-color: var(--line-strong); background: var(--wash); }
.pos-lowest, .pos-low { color: var(--celadon); border-color: color-mix(in srgb, var(--celadon) 40%, transparent); background: color-mix(in srgb, var(--celadon) 8%, transparent); }
/* wayfinding: breadcrumbs (audit C1) and an "On this page" row (C2) */
.crumbs { display: flex; align-items: flex-start; gap: var(--s2); margin-bottom: 2px; min-width: 0; }
.crumbs > .seal-mark { margin-top: .2em; flex-shrink: 0; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .15em .45em; min-width: 0; list-style: none; margin: 0; padding: 0; font-size: calc(13.5px * var(--text-scale)); color: var(--muted); }
.crumbs li { min-width: 0; overflow-wrap: anywhere; }
.crumbs li + li::before { content: "›"; margin-right: .45em; color: var(--line-strong); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); }
.otp { display: flex; gap: var(--s3); align-items: baseline; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--s2) 0; }
.otp-h { flex: none; font-size: calc(13px * var(--text-scale)); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
:root:lang(zh-Hans) .otp-h, :root:lang(zh-Hant) .otp-h { text-transform: none; letter-spacing: .12em; }
.otp ol { display: flex; flex-wrap: wrap; gap: 2px 14px; list-style: none; margin: 0; padding: 0; }
.otp a { display: inline-flex; align-items: center; min-height: 32px; font-size: calc(14px * var(--text-scale)); color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; }
.otp a:hover { color: var(--accent); border-bottom-color: currentColor; }
@media (max-width: 760px) {
  .otp { flex-direction: column; align-items: stretch; gap: 10px; }
  .otp ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .otp li { min-width: 0; display: flex; }
  .otp a { width: 100%; min-height: var(--tap); line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
}
section[id] { scroll-margin-top: 110px; }
/* accessibility (audit F5, F6, F10): a visible search focus ring; seal red as text passes in dark mode; larger targets */
.search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.search:focus-within { box-shadow: 0 0 0 2px var(--accent); border-radius: var(--r); }
:root { --seal-text: #b5311d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --seal-text: #e0614a; } }
:root[data-theme="dark"] { --seal-text: #e0614a; }
.alm-zh, .gm b, .gtoc a span, .ptl-me, .gsn, .gzh-big, .gnum.first, .gcard.first .gnum, .nf .state-mark, .todayl { color: var(--seal-text); fill: var(--seal-text); }
.tbl td a { display: inline-block; padding-block: 3px; }
.sheet .sec[aria-current] { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--seal); }
/* without JavaScript: the phone rail stays as a scrolling row, and the dead Menu button hides (audit H2) */
@media (max-width: 760px) { html:not(.js) .rail { display: flex !important; } html:not(.js) .menu-btn { display: none; } }
/* reserve space so the home season card and search results do not shift the page (audit H4) */
.season { min-height: 108px; }
/* paper texture: a faint fibre grain on the larger surfaces, never on reading text (one tile, about 3 KB) */
:root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .26 0 0 0 0 .2 0 0 0 1.1 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --grain-o: .55; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --grain-o: .35; } }
:root[data-theme="dark"] { --grain-o: .35; }
.hero::after, .season::after, .sec::after, .site-foot::after, .kfacts::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--grain); opacity: var(--grain-o); mix-blend-mode: multiply; border-radius: inherit; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero::after, :root:not([data-theme="light"]) .season::after, :root:not([data-theme="light"]) .sec::after, :root:not([data-theme="light"]) .site-foot::after, :root:not([data-theme="light"]) .kfacts::after { mix-blend-mode: screen; filter: invert(1); } }
:root[data-theme="dark"] .hero::after, :root[data-theme="dark"] .season::after, :root[data-theme="dark"] .sec::after, :root[data-theme="dark"] .site-foot::after, :root[data-theme="dark"] .kfacts::after { mix-blend-mode: screen; filter: invert(1); }
.season, .site-foot, .kfacts { position: relative; }
.site-foot { background: linear-gradient(var(--wash), var(--bg) 70%); }
/* Feather the corner wash into the paper, without a separate warm patch. */
.hero { background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent-soft) 16%, transparent), color-mix(in srgb, var(--accent-soft) 5%, transparent) 26%, transparent 55%), radial-gradient(80% 70% at 100% 100%, color-mix(in srgb, var(--celadon) var(--hero-glow), transparent), transparent 66%), var(--surface); }
.hero > *:not(.hero-ridge) { position: relative; z-index: 1; }
/* home cards: the background character larger and wholly inside the card, still a watermark */
.sec-ch { right: 8px; bottom: 6px; font-size: calc(112px * var(--text-scale)); opacity: .075; }
.sec:hover .sec-ch { opacity: .12; }
.secs.compact .sec-ch { font-size: calc(64px * var(--text-scale)); right: 6px; bottom: 4px; }
@media (max-width: 520px) { .sec-ch { font-size: calc(96px * var(--text-scale)); } }
@media print { .hero::after, .season::after, .sec::after, .site-foot::after, .kfacts::after { display: none; } }
/* masthead (entry pages): breadcrumb on its own row; the Chinese name and the English title share a top line */
.stack > .crumbs { margin-bottom: calc(var(--s3) * -1); }
.mast { align-items: start; }
.mast .glyphs { margin-top: -.06em; }
.mast .titles { padding-top: .35em; }
.mast .titles h1 { margin-top: 0; }
@media (max-width: 560px) { .mast .titles { padding-top: 0; } }
/* header controls: one box, one hover, one focus, one pressed state (language, theme, menu, search, solar term) */
.lang select, .theme-btn, .menu-btn, .jieqi { height: 38px; min-height: 38px; border: 1px solid var(--line); border-radius: var(--r); background-color: var(--bg); color: var(--ink);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.theme-btn { width: 38px; border-radius: var(--r); }
.lang select:hover, .theme-btn:hover, .menu-btn:hover, .jieqi:hover { border-color: var(--line-strong); background-color: var(--wash); }
.lang select:focus-visible, .theme-btn:focus-visible, .menu-btn:focus-visible, .jieqi:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--line-strong); }
.lang select:active, .theme-btn:active, .menu-btn:active, .jieqi:active, .menu-btn[aria-expanded="true"] { background-color: var(--accent-soft); border-color: var(--accent-line); }
.search input { transition: border-color .15s ease, background-color .15s ease; }
.search input:hover { border-color: var(--line); }
.jieqi { padding: 0 10px; margin: 0; align-items: center; flex-shrink: 0; }
.jieqi:hover { background-color: var(--wash); }
.jieqi:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 760px), (pointer: coarse) { .lang select, .theme-btn, .menu-btn { height: var(--tap); min-height: var(--tap); } .theme-btn { width: var(--tap); } }
@media (max-width: 379px) { .theme-btn { width: 42px; height: 42px; min-height: 42px; } .menu-btn { height: 42px; min-height: 42px; } .lang select { height: 44px; min-height: 44px; } }
/* logo: a quiet hover, the 茶典 seal characters turn cinnabar, nothing else moves or glows */
.brand-mark { display: block; flex: none; line-height: 0; }
.brand .seal, .brand .name { transition: color .15s ease; }
.brand:hover .seal, .brand:focus-visible .seal { color: var(--seal-text); }
.brand:hover .name, .brand:focus-visible .name { color: var(--ink); }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r); }
@media (prefers-reduced-motion: reduce) { .lang select, .theme-btn, .menu-btn, .search input, .jieqi, .brand .seal, .brand .name { transition: none; } }
/* paper, refined: a finer, lower-contrast grain with faint horizontal fibres (like 宣纸), and a pressed-paper edge */
:root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='4' stitchTiles='stitch' result='a'/%3E%3CfeColorMatrix in='a' values='0 0 0 0 .3 0 0 0 0 .24 0 0 0 0 .18 0 0 0 .85 -.34' result='g'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011 .42' numOctaves='3' seed='7' stitchTiles='stitch' result='f'/%3E%3CfeColorMatrix in='f' values='0 0 0 0 .36 0 0 0 0 .29 0 0 0 0 .21 0 0 0 1.7 -1.02' result='h'/%3E%3CfeMerge%3E%3CfeMergeNode in='g'/%3E%3CfeMergeNode in='h'/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); --grain-o: .42; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --grain-o: .28; } }
:root[data-theme="dark"] { --grain-o: .28; }
.sec, .season, .hero { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent), 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent); transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease; }
.sec { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--wash) 55%, var(--surface))); }
.sec:hover { background: linear-gradient(180deg, var(--surface), var(--wash)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent), 0 6px 18px -10px color-mix(in srgb, var(--ink) 28%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .season, :root:not([data-theme="light"]) .hero { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent), 0 1px 2px #0006; } }
:root[data-theme="dark"] .season, :root[data-theme="dark"] .hero { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent), 0 1px 2px #0006; }
.sec::after, .season::after, .hero::after { background-size: 320px 320px; }
@media (prefers-reduced-motion: reduce) { .sec, .season, .hero { transition: none; } }
/* cards as mounted paper: light falls from the top left, a hairline mount sits inside the edge, and the
   watermark character is ink absorbed into the sheet (the grain shows through the strokes) */
.sec { background:
    radial-gradient(130% 95% at 12% -10%, color-mix(in srgb, #fff 62%, transparent), transparent 58%),
    linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--wash) 60%, var(--surface)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 65%, transparent), inset 0 0 0 4px transparent, inset 0 0 0 5px color-mix(in srgb, var(--line) 55%, transparent), 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent); }
.sec:hover { background:
    radial-gradient(130% 95% at 12% -10%, color-mix(in srgb, #fff 70%, transparent), transparent 58%),
    linear-gradient(180deg, var(--surface), var(--wash));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent), inset 0 0 0 4px transparent, inset 0 0 0 5px color-mix(in srgb, var(--line-strong) 60%, transparent), 0 8px 22px -12px color-mix(in srgb, var(--ink) 30%, transparent); }
.sec-ch { color: transparent; opacity: .13;
  background: var(--grain), linear-gradient(165deg, var(--ink) 30%, color-mix(in srgb, var(--ink) 72%, var(--accent)));
  background-size: 320px 320px, 100% 100%; -webkit-background-clip: text; background-clip: text; }
.sec:hover .sec-ch { opacity: .2; }
@media (prefers-color-scheme: dark) {  :root:not([data-theme="light"]) .sec-ch { opacity: .16; } }

:root[data-theme="dark"] .sec-ch { opacity: .16; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) { .sec-ch { color: var(--ink); background: none; opacity: .075; } }
/* restraint (final word on the home cards): a clean sheet, one hairline, one crisp ink mark;
   hover firms the border and warms the mark toward cinnabar. Texture lives only on the hero. */
.sec, .sec:hover { background: var(--surface); box-shadow: none; }
.sec { border: 1px solid var(--line); transition: border-color .2s ease; }
.sec:hover { border-color: var(--line-strong); }
.sec::after, .season::after, .kfacts::after { display: none; }
.season, .season:hover { box-shadow: none; }
.sec-ch, .sec:hover .sec-ch { background: none; -webkit-background-clip: border-box; background-clip: border-box; }
.sec-ch { color: var(--ink); opacity: .055; transition: color .25s ease, opacity .25s ease; }
.sec:hover .sec-ch { color: var(--seal); opacity: .1; }
.sec-t { letter-spacing: .01em; }
.sec-n { color: var(--muted); }
.sec:hover .sec-n { color: var(--ink); }
.hero { box-shadow: none; }
:root { --grain-o: .3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --grain-o: .2; } :root:not([data-theme="light"]) .sec-ch { opacity: .08; } :root:not([data-theme="light"]) .sec:hover .sec-ch { opacity: .14; } }
:root[data-theme="dark"] { --grain-o: .2; } :root[data-theme="dark"] .sec-ch { opacity: .08; } :root[data-theme="dark"] .sec:hover .sec-ch { opacity: .14; }
@media (prefers-reduced-motion: reduce) { .sec, .sec-ch { transition: none; } }
/* A category reached from a tea page lands below the header without a selection flash. */
.cat { scroll-margin-top: var(--category-anchor-offset, calc(76px + env(safe-area-inset-top, 0px))); }
.six-intro { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:12px 24px; margin-bottom:16px; }
.six-intro > p { margin:0; max-width:none; }
.six-guide-link { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:9px 13px; border:1px solid var(--line); border-radius:6px; color:var(--ink); font-size:calc(14px * var(--text-scale)); line-height:1.4; text-decoration:none; white-space:nowrap; }
.six-guide-link svg { flex:none; }
.six-guide-link:is(:hover,:focus-visible) { border-color:var(--line-strong); background:var(--wash); text-decoration:none; }
.six-guide-link:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.tool-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.tool-section-heading h2 { margin:0; padding:0; border:0; }
.tool-section-heading > .six-guide-link { flex:none; }
.tool-view-short { display:none; }
.tool-view-link svg { width:16px; height:16px; }
@media(max-width:600px) {
  .tool-section-heading { flex-wrap:nowrap; gap:12px; }
  .tool-section-heading h2 { flex:none; white-space:nowrap; }
  .tool-view-full, .tool-icon-only .tool-view-short { display:none; }
  .tool-view-short { display:inline; }
  .tool-icon-only .tool-view-link { width:44px; padding:9px; }
}
@media(max-width:600px) { .six-intro { grid-template-columns:minmax(0,1fr); } .six-guide-link { justify-self:start; } }
/* the picking-year wheel: hairlines stay one device pixel at any size; paper and key-fret quietly */
.wheel-lead { margin: 0 0 16px; max-width: none; font-size: calc(15px * var(--text-scale)); line-height: 1.65; color: var(--muted); text-wrap: wrap; }
.hwheel, .wheel { scroll-margin-top: 88px; }
@media (max-width: 760px) { .hwheel, .wheel { scroll-margin-top: calc(132px + env(safe-area-inset-top, 0px)); } }
.hwheel .hl, .hwheel .hl-g circle { vector-effect: non-scaling-stroke; stroke-width: 1px; }
.hwheel .hl2 { vector-effect: non-scaling-stroke; stroke-width: 1.5px; stroke: var(--line-strong); }
.hwheel .fret { opacity: .2; }
.hwheel .fret path { vector-effect: non-scaling-stroke; stroke-width: 1px; }
.hwheel .hw-paper { opacity: .28; }
.hwheel path[stroke-linecap="round"] { stroke-linejoin: round; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hwheel .fret { opacity: .28; } }
:root[data-theme="dark"] .hwheel .fret { opacity: .28; }
/* footer, final word: it rests at the foot of the window on short pages, and lines up the same way in every
   language. Phones and narrow windows: one column, languages last. Wide: the three text lines on the left, the
   language row on the right, level with the first line (the language names are endonyms, so that column has
   one width in all five languages). The links keep their tap area through padding, not line height. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.shell { width: 100%; flex: 1 0 auto; }
.site-foot { flex: none; }
.foot-in { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "own" "contact" "src"; align-items: start; gap: 6px 40px; }
.foot-own { grid-area: own; } .foot-contact { grid-area: contact; } .foot-src { grid-area: src; }
.foot-src { display: flex; flex-wrap: wrap; column-gap: 10px; }
.foot-src a, .foot-contact a, .foot-own span + span { white-space: nowrap; }
.foot-src a { margin-left: 0; }
@media print { body { display: block; min-height: 0; } }
/* section addresses: Learn sections keep fixed ids in every language; the # shows on hover, faintly on touch screens */
.guide section[id], #guides, #six-categories, #picking-year, #processing, #termbase { scroll-margin-top: 96px; }
@media (max-width: 760px) and (min-height: 561px) {
  .guide section[id], #guides, #six-categories, #picking-year, #processing, #termbase { scroll-margin-top: calc(132px + env(safe-area-inset-top, 0px)); }
}
.h-link { margin-left: .35em; font-size: .62em; font-weight: 400; vertical-align: .14em; color: var(--muted); text-decoration: none; opacity: 0; }
caption:hover .h-link, h2:hover .h-link, .h-link:focus-visible, section:target .h-link { opacity: .75; }
.h-link:hover { color: var(--accent); opacity: 1; }
@media (hover: none) { .h-link { opacity: .4; } }
@media print { .h-link { display: none; } }
/* Mobile reading and controls: one rhythm across reference pages, guides and listings. */
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 12px; }
.sheet-title { font-family: var(--f-display); font-size: calc(24px * var(--text-scale)); font-weight: 600; }
.sheet-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.sheet-close:hover { background: var(--wash); }
.sheet-close:active { background: color-mix(in srgb, var(--ink) 9%, var(--bg)); }
.sheet-close:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 6px; }
.sheet-close span { font-size: calc(23px * var(--text-scale)); line-height: 1; }
.sheet { overscroll-behavior: contain; }
@media (max-width: 760px) {
  .top { top: 0; padding-top: env(safe-area-inset-top, 0px); }
  .top-in { column-gap: 8px; }
  .brand, .jieqi { min-height: 44px; align-items: center; }
  .theme-btn, .menu-btn { flex-shrink: 0; min-width: 44px; width: 44px; height: 44px; min-height: 44px; }
  .menu-btn { width: auto; }
  .lang { min-width: 0; }
  .lang select { height: 44px; min-height: 44px; font-size: calc(16px * var(--text-scale)); max-width: 8em; }
  .sheet { padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
  .sheet-in { max-width: 520px; margin: 0 auto; padding: 16px; box-shadow: 0 12px 48px #0003; }
  .sheet-head { position: sticky; top: -1px; z-index: 1; background: var(--bg); padding-block: 4px 12px; }
  .sheet .sec { min-height: 68px; padding: 12px; }
  .sheet a { scroll-margin-block: 88px 16px; }
  .sheet-foot { flex-wrap: wrap; gap: 4px 20px; }
  .sheet .sec-t { flex-wrap: wrap; gap: 4px 8px; }
  .sheet .sec-n { font: 500 calc(13px * var(--text-scale)) var(--f-mono); letter-spacing: 0; }
  .secs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .otp { min-width: 0; }
  .otp ol { width: 100%; min-width: 0; max-width: 100%; padding-bottom: 4px; scrollbar-width: thin; -webkit-mask: none; mask: none; overscroll-behavior-inline: contain; }
  .otp a, .gtoc a { min-height: 44px; }
  section[id], .gsec, .grefs li { scroll-margin-top: calc(132px + env(safe-area-inset-top, 0px)); }
  .names-all summary, .foot-contact a { display: inline-flex; align-items: center; min-height: 44px; }
  .cite { min-width: 36px; height: 36px; }
  .mkt select, .ct-form input, .ct-form select, .ct-form textarea, #decode { font-size: calc(16px * var(--text-scale)); }
  .row { padding-block: 16px; }
  .row .h { line-height: 1.4; }
  .row .s { margin-top: 4px; }
  .row .t { overflow-wrap: anywhere; }
  .src .meta { overflow-wrap: anywhere; }
  .gsec p, .note, .lead { overflow-wrap: anywhere; }
}
@media (max-width: 640px) {
  .jieqi { display: none; }
  .filters { align-items: stretch; gap: 14px; padding: 14px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r); }
  .filters > span, .filters .mkt { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; }
  .filters label { margin: 0; }
  .filters .mkt select { width: 100%; flex: auto; }
  .filters .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; gap: 4px; border: 0; background: none; }
  .filters .seg button { flex: 1 0 auto; border: 1px solid var(--line); border-radius: var(--r); }
  .otp { gap: 4px; }
  .otp a { border: 1px solid var(--line); border-radius: var(--r); padding: 6px 12px; background: var(--surface); }
  .otp ol { gap: 8px; }
  .tline li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .gpn { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .gpn a { padding: 16px; min-height: 88px; }
  .gpn a b { font-size: calc(24px * var(--text-scale)); }
  .gpn .next { text-align: left; align-items: flex-start; }
}
@container (max-width: 620px) {
  .lt tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "p p" "pp pr" "v v" "e e" "y o"; gap: 8px 12px; padding: 18px 4px; }
  .lt .c-p { font-size: calc(16px * var(--text-scale)); line-height: 1.5; }
  .lt .c-pp { text-align: left; }
  .lt .c-pp > strong, .lt .c-pp > b { font-size: calc(18px * var(--text-scale)); }
  .lt .c-pr { align-self: center; }
  .lt .c-v, .lt .c-e { line-height: 1.6; }
  .lt .c-y, .lt .c-o { white-space: normal; }
}
@media (max-width: 359px) {
  .top-in { column-gap: 6px; }
  .brand { gap: 5px; }
  .brand img { width: 28px; height: 28px; }
  .brand .seal { font-size: calc(20px * var(--text-scale)); }
  .lang select { max-width: 7em; padding-left: 6px; }
  .sheet-in { padding: 12px; }
  .sheet-close { font-size: calc(14px * var(--text-scale)); }
}
@media (max-height: 560px) {
  section[id], .gsec, .grefs li { scroll-margin-top: 16px; }
}

/* A persistent reading preference; relative type inherits the larger text naturally. */
:root { --text-scale: 1; }
:root[data-text-size="large"] { --text-scale: 1.15; }
.text-size-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; padding: 0 5px; font: 600 calc(15px * var(--text-scale))/1 var(--f-body); cursor: pointer; }
.top-in :is(.lang select, .theme-btn, .menu-btn, .jieqi, .text-size-btn, .search input) { height: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--r); background-color: var(--bg); color: var(--ink); }
.top-in :is(.theme-btn, .text-size-btn) { width: 44px; }
.top-in .search input { padding-block: 0; }
.top-in .search { margin: 0; display: flex; align-items: center; }
.top-in :is(.lang select, .theme-btn, .menu-btn, .jieqi, .text-size-btn, .search input):hover { border-color: var(--line-strong); background-color: var(--wash); }
.text-size-btn:hover { border-color: var(--line-strong); background-color: var(--wash); }
.text-size-btn[aria-pressed="true"] { border-color: var(--accent-line); background-color: var(--accent-soft); color: var(--accent); }
.text-size-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 760px) { .top-in { column-gap: 6px; } .top-in .lang select { max-width: 26vw; } }


/* Quiet material, clean focus: header edges carry interaction without a colour wash. */
:root { color-scheme: light; --nav-hover: #8f8271; }
:root[data-theme="dark"] { color-scheme: dark; --nav-hover: #9c8d78; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --nav-hover: #9c8d78; } }
.top-in :is(.lang select, .theme-btn, .menu-btn, .jieqi, .text-size-btn, .search input) { border-radius: 6px; transition: border-color .16s ease; }
@media (hover: hover) {
 .top-in :is(.lang select, .theme-btn, .menu-btn, .jieqi, .text-size-btn, .search input):hover { border-color: var(--nav-hover); background-color: var(--bg); }
 .top-in .text-size-btn[aria-pressed="true"]:hover { background-color: var(--accent-soft); }
}
.top-in .search:focus-within { box-shadow: none; }
.top-in :is(.lang select, .theme-btn, .menu-btn, .jieqi, .text-size-btn, .search input):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .top-in :is(.lang select, .theme-btn, .menu-btn, .jieqi, .text-size-btn, .search input) { transition: none; } }

/* Recipe index: factory collections and readable recipe identities. */
.hero::after { opacity: .12; }
.recipe-collection + .recipe-collection { margin-top: 30px; }
.recipe-collection-h { display: flex; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line-strong); }
.recipe-collection-h h2 { margin: 0; font-size: calc(24px * var(--text-scale)); }
.recipe-collection-h a { color: var(--ink); text-decoration: none; }
.recipe-collection-h a:hover { color: var(--accent); }
.recipe-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 28px; }
.recipe-card { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 14px 20px; align-content: start; padding: 24px 12px; border-bottom: 1px solid var(--line); border-radius: 6px; text-decoration: none; color: var(--ink); transition: background-color 180ms ease, box-shadow 180ms ease; }
.recipe-code { font-family: var(--f-display); font-size: calc(42px * var(--text-scale)); line-height: 1; font-weight: 500; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.035em; color: var(--seal-text); }
.recipe-card-name { display: grid; gap: 3px; align-content: start; }
.recipe-card-name strong { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.recipe-card-zh { font-family: var(--f-han); font-size: calc(14px * var(--text-scale)); color: var(--muted); }
.recipe-card-summary { grid-column: 1/-1; margin: 0; font-size: calc(15px * var(--text-scale)); line-height: 1.6; }
.recipe-card-meta { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; color: var(--muted); font-size: calc(13px * var(--text-scale)); }
.recipe-card:is(:hover, :focus-visible) { color: var(--ink); text-decoration: none; }
.recipe-card-name strong, .recipe-card-zh { transition: color 180ms ease; }
.recipe-card:focus-visible { background: var(--wash); box-shadow: inset 0 0 0 1px var(--line-strong); outline: 2px solid var(--accent); outline-offset: 2px; }
.recipe-card:focus-visible .recipe-card-name strong { color: var(--accent); }
@media (hover: hover) {
  .recipe-card:hover { background: var(--wash); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-strong) 85%, var(--seal-text)); }
  .recipe-card:hover .recipe-card-name strong { color: var(--accent); }
  .recipe-card:hover .recipe-card-zh { color: color-mix(in srgb, var(--muted) 75%, var(--ink)); }
}
.recipe-card:active { background: var(--wash); box-shadow: inset 0 0 0 1px var(--line-strong); }
@media (prefers-reduced-motion: reduce) { .recipe-card, .recipe-card-name strong, .recipe-card-zh { transition: none; } }
@media (max-width: 640px) { .recipe-cards { grid-template-columns: minmax(0,1fr); } .recipe-code { min-width: 2.4em; } }

/* Header shares the content container, including safe-area gutters. */
.top { padding-inline: 0; }
.top-in { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.top-in .search { min-width: 0; }
.top-in .search input { padding-left: 40px; padding-right: 16px; min-width: 0; }
.top-in .search input:placeholder-shown { text-overflow: ellipsis; }
.top-in .search svg { left: 12px; top: 12px; transform: none; pointer-events: none; }
.top-in .theme-btn, .top-in .menu-btn { padding-block: 0; }
.top-in .theme-btn svg, .top-in .menu-btn svg { flex: none; width: 20px; height: 20px; }
.top-in .mb-ic { display: block; }
.top-in :is(.lang select, .menu-btn, .jieqi, .text-size-btn, .search input) { font-family: var(--f-body); font-size: calc(16px * var(--text-scale)); font-weight: 400; line-height: 1.25; }
.top-in .jieqi b { font-size: inherit; font-weight: 400; }
.site-foot { background: var(--page-end); }
.site-foot::after { display: none; }
.site-foot::before { content: ""; position: absolute; pointer-events: none; top: -6px; left: 50%; transform: translateX(-50%); width: clamp(144px, 20vw, 208px); height: 11px; background: var(--page-end); }
.foot-fret { position: absolute; pointer-events: none; top: -6px; left: 50%; transform: translateX(-50%); width: clamp(96px, 12.5vw, 131px); height: 11px; color: var(--ink); opacity: .2; }
:root[data-theme="dark"] .foot-fret { opacity: .28; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .foot-fret { opacity: .28; } }
@media print, (forced-colors: active) { .site-foot::before, .foot-fret { display: none; } }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; padding-top: 30px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); font-size: calc(14px * var(--text-scale)); }
.foot-brand { flex: 0 0 auto; grid-area: brand; display: grid; gap: 4px; min-width: 0; width: max-content; max-width: 100%; justify-self: start; }
.foot-brand > span { font-size: calc(13px * var(--text-scale)); line-height: 1.5; }
.foot-identity { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px 10px; }
.foot-identity > a { font-family: var(--f-display); font-size: calc(22px * var(--text-scale)); line-height: 1.3; color: var(--ink); text-decoration: none; }
.foot-brand .foot-own { margin: 0; color: var(--muted); font-size: calc(13px * var(--text-scale)); line-height: 1.6; font-variant-numeric: tabular-nums; }
.foot-src-m { display: none; }
.foot-links { order: 1; max-width: 100%; margin-inline-start: auto; grid-area: links; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 24px; align-self: center; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; line-height: 1.5; color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--line-strong); }
.foot-contact { grid-area: contact; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.foot-contact a { display: inline-flex; gap: 5px; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.foot-contact .contact-label { text-decoration: underline 1px var(--accent-line); text-underline-offset: 4px; }
.foot-contact a:hover .contact-label { text-decoration-color: currentColor; }
.foot-meta { order: 3; flex: 0 0 100%; box-sizing: border-box; grid-area: meta; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--line) 65%, transparent); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; font-size: calc(13px * var(--text-scale)); line-height: 1.6; }
.foot-own, .foot-src { grid-area: auto; margin: 0; }
.foot-meta { align-items: baseline; }
.foot-meta .foot-src { margin-inline-start: auto; text-align: end; }
.foot-own .foot-owner-link { color: inherit; text-decoration: none; }
.foot-own .foot-owner-link:hover, .foot-own .foot-owner-link:focus-visible { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.foot-own span + span { white-space: normal; }
@media(max-width: 1050px) {
  .foot-in { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "brand top" "links links" "meta meta"; gap: 12px 16px; padding-top: 24px; }
  .foot-links { justify-content: flex-end; gap: 0 18px; }
  .foot-contact { display: block; }
  .foot-contact > span { display: block; }
  .foot-meta { gap: 4px 24px; padding-top: 14px; }
}
.back-top { order: 2; grid-area: top; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; transition: color .16s ease, border-color .16s ease; }
.back-top[hidden] { display: none; }
.back-top:hover { color: var(--ink); border-color: var(--nav-hover); }
.back-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media print { .back-top { display: none; } }
.tbl table.lt { min-width: 0; table-layout: fixed; }
.lt th, .lt td { overflow-wrap: anywhere; }
.lt th { white-space: normal; letter-spacing: .03em; }
.lt .num { white-space: normal; }
.lt .claim.sold-out { display: inline-flex; white-space: nowrap; overflow-wrap: normal; word-break: normal; vertical-align: baseline; }
.lt :is(.claim, .shiptag, .sess, .pos) { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
.lt td { padding-block: 16px; }
.lt .listing-title { font-weight: 600; }
.lt .listing-title { line-height: 1.5; text-decoration: none; border-bottom: 0; transition: color .15s ease; }
.lt .listing-title:hover { color: var(--seal-text); text-decoration: none; }
.lt :is(.c-pr,.c-pp) { font-variant-numeric: tabular-nums; }
.lt .c-pp > strong { font-size: calc(17px * var(--text-scale)); font-weight: 600; }
.lt a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.sgroup > h2 { display: flex; align-items: center; gap: 8px; }
.sgroup > h2 .seal-mark.xs { margin: 0; vertical-align: initial; }
.sgroup > h2 .count { flex: none; }
.listing-context { margin-top: 8px; font-size: calc(14px * var(--text-scale)); font-weight: 400; line-height: 1.5; color: var(--muted); }
.listing-context > div + div { margin-top: 3px; }
.lt .c-pr .path { display: block; }
@container (max-width: 620px) {
  .lt tr { grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-areas: "v v" "p p" "pr pp"; gap: 12px 16px; padding: 18px 14px; }
  .lt td { padding: 0; }
  .lt .listing-title { font-size: calc(16px * var(--text-scale)); }
  .lt .c-v { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
  .lt .c-v .ships { margin: 0; }
  .lt .c-v > a { padding-block: 4px; }
  .lt .c-pr, .lt .c-pp { align-self: start; text-align: left; border-top: 1px solid var(--line); padding-top: 10px; }
  .lt .c-pr::before, .lt .c-pp::before { content: attr(data-h); display: block; margin-bottom: 4px; font-size: calc(13px * var(--text-scale)); color: var(--muted); font-weight: 400; }
}
#reading-the-code { container-type: inline-size; }
.recipe-code-break { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; border-top: 2px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.recipe-code-break > div { display: grid; grid-template-columns: max-content minmax(0,1fr); align-items: baseline; gap: 12px; padding: 14px 16px; min-width: 0; border-inline-end: 1px solid var(--line); }
.recipe-code-break > div:last-child { border-inline-end: 0; }
.recipe-code-break dt { font-family: var(--f-mono); font-size: calc(30px * var(--text-scale)); line-height: 1.2; color: var(--seal-text); font-weight: 500; margin: 0; white-space: nowrap; }
.recipe-code-break dd { margin: 0; font-size: calc(15px * var(--text-scale)); line-height: 1.6; overflow-wrap: anywhere; }
@container(max-width:640px) { .recipe-code-break { grid-template-columns: minmax(0,1fr); } .recipe-code-break > div { grid-template-columns: 2.8em minmax(0,1fr); padding: 12px 4px; border-inline-end: 0; border-bottom: 1px solid var(--line); } .recipe-code-break > div:last-child { border-bottom: 0; } }
@media(max-width:640px) { .recipe-code-break { grid-template-columns: minmax(0,1fr); } .recipe-code-break > div { grid-template-columns: 2.8em minmax(0,1fr); padding: 12px 4px; border-inline-end: 0; border-bottom: 1px solid var(--line); } .recipe-code-break > div:last-child { border-bottom: 0; } }
/* Section navigation: a quiet label above a consistently spaced set of links. */
.otp { flex-direction: column; align-items: stretch; gap: 10px; padding-block: 16px; }
.otp-h { line-height: 1.4; }
.otp ol { gap: 8px; padding-bottom: 0; }
.otp li { min-width: 0; display: flex; }
.otp a { min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); font-size: calc(14px * var(--text-scale)); line-height: 1.4; overflow-wrap: anywhere; transition: border-color .16s ease, color .16s ease; }
.otp a:hover { border-color: var(--line-strong); color: var(--accent); background: var(--wash); }
.otp a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 760px) { .otp a { min-height: 44px; } }
/* Keep the native select's keyboard and touch behavior; enhance its popup where supported. */
.top-in .lang select { padding-inline: 12px 30px; cursor: pointer; text-overflow: ellipsis; }
.lang option { font: inherit; color: var(--ink); background: var(--bg); }
@supports (appearance: base-select) {
  .top-in :is(.lang, .currency) select, :is(.lang, .currency, .listing-pagination, .map-picker, .vendor-controls) select::picker(select) { appearance: base-select; }
  .top-in .lang select { background-image: none; padding-inline: 12px; gap: 10px; align-items: center; }
  .lang select::picker-icon { color: var(--muted); font-size: 12px; }
  :is(.lang, .currency, .listing-pagination, .map-picker, .vendor-controls) select::picker(select) { margin-top: 8px; padding: 6px; min-width: 180px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg); color: var(--ink); box-shadow: 0 3px 10px -2px rgb(0 0 0 / .1); font-family: var(--f-body); font-size: calc(16px * var(--text-scale)); }
  :is(.lang, .currency, .listing-pagination, .map-picker, .vendor-controls) option { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 38px 10px 12px; border-radius: 5px; line-height: 1.4; cursor: pointer; }
  :is(.lang, .currency, .listing-pagination, .map-picker, .vendor-controls) option:checked { color: var(--accent); background: var(--accent-soft); }
  :is(.lang, .currency, .listing-pagination, .map-picker, .vendor-controls) option:hover, :is(.lang, .currency, .listing-pagination, .map-picker, .vendor-controls) option:focus { background: var(--wash); outline: none; }
  :is(.lang, .currency, .listing-pagination, .map-picker, .vendor-controls) option::checkmark { content: ""; position: absolute; inset-inline-end: 12px; width: 16px; height: 16px; background: currentColor; color: var(--muted); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4 10 4 4 8-8' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
}
@media (prefers-reduced-motion: reduce) { .otp a { transition: none; } }
.hw-info { width: min(100%, 360px); margin: 0 0 16px auto; min-height: 140px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); overflow-wrap: anywhere; }
.hw-info-title, .hw-info-date { display: block; }
.hw-info-title { font-size: calc(16px * var(--text-scale)); font-weight: 500; line-height: 1.5; }
.hw-info-date { color: var(--muted); font-size: calc(14px * var(--text-scale)); margin-top: 4px; }
.hw-info-note { font-size: calc(14px * var(--text-scale)); line-height: 1.6; margin: 8px 0 0; }
.hw-hit { cursor: pointer; outline: none; }
.hw-hit path { fill: transparent; stroke: transparent; stroke-width: 1; }
.hw-hit .hw-band-hit { fill: none; stroke-width: 16; stroke-linecap: round; pointer-events: stroke; }
.hw-hit.is-selected path, .hw-hit:focus-visible path { fill: color-mix(in srgb, var(--accent) 6%, transparent); stroke: var(--accent); stroke-opacity: .6; }
.hw-hit:focus-visible path { stroke-width: 1.5; stroke-opacity: .9; }
.hw-hit.is-selected .hw-band-hit, .hw-hit:focus-visible .hw-band-hit { fill: none; stroke: var(--accent); stroke-width: 16; stroke-opacity: .14; }
.hw-hit:focus-visible .hw-band-hit { stroke-opacity: .24; }
@media (max-width: 760px) { .hw-info { width: 100%; min-height: 170px; } }
.alias-identity { display: grid; gap: 4px; min-width: 0; }
.alias-rendering { font-size: calc(14.5px * var(--text-scale)); line-height: 1.6; overflow-wrap: anywhere; }
.alias-key { font-size: calc(13.5px * var(--text-scale)); line-height: 1.6; color: var(--muted); margin: 0 0 12px; }
.check-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.check-summary > div { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 6px; padding: 16px; min-width: 0; }
.check-summary dt { font-size: calc(14px * var(--text-scale)); color: var(--muted); overflow-wrap: break-word; text-wrap: pretty; }
.check-summary dd { margin: auto 0 0; padding-top: 8px; font-size: calc(28px * var(--text-scale)); font-variant-numeric: tabular-nums; }
.check-groups { border-top: 1px solid var(--line-strong); }
.check-group { border-bottom: 1px solid var(--line); }
.check-group summary { cursor: pointer; display: flex; gap: 12px; align-items: center; min-height: 56px; padding: 12px 4px; list-style: none; font-weight: 500; }
.check-group summary::-webkit-details-marker { display: none; }
.check-group summary::before { content: '+'; width: 20px; flex: none; color: var(--muted); text-align: center; }
.check-group[open] summary::before { content: '−'; }
.check-group summary .count { margin-left: auto; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.check-group summary:hover { color: var(--accent); }
.check-group summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.check-group .check-list { padding: 0 0 20px; }
@media (max-width: 480px) { .check-summary { gap: 6px; } .check-summary > div { padding: 12px 8px; } .check-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
@media (max-width: 560px) {
  .check-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .check-summary > div:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
  .check-summary > div:last-child dd { margin: 0; padding: 0; }
}
.otp-toggle-item { display: none !important; }
.js .otp-toggle-item { display: flex !important; }
.js .otp-compact:not(.otp-expanded) .otp-extra { display: none; }
.otp-toggle { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: calc(14px * var(--text-scale)); line-height: 1.4; text-align: left; color: var(--ink); background: var(--bg); cursor: pointer; }
.otp-toggle:hover { border-color: var(--line-strong); background: var(--wash); }
.otp-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.otp-toggle-icon { flex: none; }
@media (max-width: 760px) { .otp-toggle { width: 100%; min-height: 44px; } }
.otp-adaptive { flex-direction: column; align-items: stretch; gap: 10px; }
.otp-adaptive ol { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; width: 100%; }
.otp-adaptive li { min-width: 0; flex: none; }
.otp-adaptive :is(a,.otp-toggle) { height: 100%; white-space: nowrap; }
.js .otp-adaptive.otp-all-fit .otp-toggle-item { display: none !important; }
.js .otp-adaptive.otp-tight:not(.otp-expanded) ol { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); }
.js .otp-adaptive.otp-tight:not(.otp-expanded) :is(a,.otp-toggle) { white-space: normal; overflow-wrap: anywhere; }
.otp-measuring { position: fixed !important; inset: 0 auto auto 0 !important; visibility: hidden !important; width: max-content !important; max-width: none !important; pointer-events: none !important; }
.otp-measuring ol { display: flex !important; flex-wrap: nowrap !important; width: max-content !important; }
.otp-measuring li { display: flex !important; width: max-content !important; }
.otp-measuring :is(a,.otp-toggle) { white-space: nowrap !important; }
@media print { .otp { display: none; } }
.lead.entry-lead, .lead.catalogue-lead { max-width: none; }
/* Equal breathing room around the tea introduction, independent of stack gaps. */
.stack > .mast + .tea-entry-lead {
  --intro-space: clamp(20px, 2.5vw, 28px);
  margin-top: calc(var(--intro-space) - var(--stack-gap));
  margin-bottom: calc(var(--intro-space) - var(--stack-gap));
  line-height: 1.6;
}
.region-kfacts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); border: 0; border-bottom: 1px solid var(--line); gap: 0 24px; }
.region-kfacts .kf { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 22px 0; border-bottom: 0; }
.region-kfacts .kl { font-size: calc(14px * var(--text-scale)); line-height: 1.45; letter-spacing: 0; text-transform: none; }
.region-kfacts .kv { font-family: var(--f-body); font-size: calc(15px * var(--text-scale)); line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.metric-number { font-family: var(--f-body); font-size: calc(clamp(28px, 3vw, 36px) * var(--text-scale)); font-weight: 600; line-height: 1.15; letter-spacing: -.035em; font-variant-numeric: lining-nums tabular-nums; color: var(--ink); }
.metric-unit { font-size: calc(16px * var(--text-scale)); color: var(--muted); white-space: nowrap; margin-inline-start: .12em; }
.region-kfacts .kfs { min-width: 0; margin-top: auto; padding-top: 4px; }
.region-kfacts .kfs .srcchip { min-width: 0; max-width: 100%; }
.region-kfacts .kfs .srcchip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.region-kfacts .kv > a { font-size: calc(18px * var(--text-scale)); line-height: 1.5; }
.metric-coordinates { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; width: fit-content; text-decoration: none; }
.metric-coordinates > span { white-space: nowrap; }
.metric-coordinates .metric-unit { margin-inline-start: .08em; }
.metric-coordinates .link-arrow { width: 12px; height: 12px; margin-inline-start: 4px; }
.metric-coordinates:hover .metric-number { color: var(--accent); }
@media (min-width: 761px) {
  .region-kfacts { grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(240px * var(--text-scale))), 1fr)); }
  .metric-coordinates { gap: 4px 10px; min-height: calc(clamp(28px, 3vw, 36px) * 1.15 * var(--text-scale)); align-items: center; }
  .metric-coordinates .metric-number { font-size: calc(22px * var(--text-scale)); font-weight: 500; letter-spacing: -.02em; }
  .metric-coordinates .metric-unit { font-size: calc(14px * var(--text-scale)); }
}
.metric-context { display: grid; grid-template-columns: minmax(110px, 20%) minmax(0,1fr); gap: 10px 24px; margin: 14px 0 0; color: var(--muted); font-size: calc(14px * var(--text-scale)); line-height: 1.65; }
.metric-context dt { color: var(--ink); font-weight: 500; }
.metric-context dd { margin: 0; max-width: 78ch; }
/* A label column and a shared day scale keep long names out of the chart. */
.harvest-calendar { container-type: inline-size; border-bottom: 1px solid var(--line); }
.harvest-entry { display: grid; grid-template-columns: minmax(110px,20%) minmax(0,1fr); gap: 20px; padding: 20px 0; border-top: 1px solid var(--line); }
.harvest-entry:first-child { border-top: 0; padding-top: 0; }
.harvest-entry > header, .harvest-body { min-width: 0; }
.harvest-entry h3 { margin: 0; font: 600 calc(17px * var(--text-scale))/1.5 var(--f-body); }
.harvest-entry .harvest-dates { margin: 5px 0 0; color: var(--muted); font-size: calc(14px * var(--text-scale)); line-height: 1.5; font-variant-numeric: lining-nums tabular-nums; }
.harvest-months { position: relative; height: 24px; color: var(--muted); font-size: calc(12px * var(--text-scale)); line-height: 1.5; }
.harvest-months > span { position: absolute; text-align: center; white-space: nowrap; }
.harvest-month-number { display: none; }
.harvest-track { position: relative; height: 24px; background: var(--wash); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.harvest-track > span { position: absolute; height: 100%; border-inline-start: 1px solid var(--line); }
.harvest-track > span:first-child { border-inline-start: 0; }
.harvest-track > span > span { display: none; }
.harvest-track > i { position: absolute; top: 6px; height: 10px; min-width: 2px; background: var(--celadon); border-radius: 2px; }
.harvest-timeline { margin-bottom: 12px; }
.harvest-note { margin: 0; font-size: calc(15px * var(--text-scale)); line-height: 1.65; }
.harvest-body .source-note { margin-top: 10px; }
@container (max-width: 600px) {
  .harvest-entry { grid-template-columns: minmax(0,1fr); gap: 10px; padding-block: 18px; }
  .harvest-entry > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
  .harvest-entry .harvest-dates { margin: 0; margin-inline-start: auto; }
  .harvest-month-name { display: none; }
  .harvest-month-number { display: inline; }
}
.region-detail-section > .source-note { margin-top: 14px; }
@media(max-width:560px) {
  .metric-context { grid-template-columns: minmax(0,1fr); gap: 4px; }
  .metric-context dd + dt { margin-top: 12px; }
  .region-picking-calendar > .dual { margin-bottom: 16px; }
}
.research-note { margin-top: 12px; padding: 8px 0 8px 12px; border-left: 1px solid var(--line-strong); font-size: calc(14px * var(--text-scale)); line-height: 1.65; color: var(--muted); overflow-wrap: anywhere; }
.research-note strong { font-weight: 500; }
.alias-pinyin { display: block; font-size: calc(14.5px * var(--text-scale)); line-height: 1.6; font-weight: 400; color: var(--muted); overflow-wrap: anywhere; }
.hero .lead { max-width: 58ch; line-height: 1.62; }
.hero-intro { font-weight: 400; }
/* A quiet wash behind the copy, with full-contrast ink and no animated text. */
.hero-text::before { content: ""; position: absolute; inset: -8px -16px -12px -12px; z-index: -1; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--surface) 42%, transparent), color-mix(in srgb, var(--surface) 18%, transparent) 78%, transparent); border-radius: 12px; filter: blur(10px); }
@media(max-width: 760px) { .hero .lead { line-height: 1.6; } }
@media(forced-colors: active) { .hero-text::before { display: none; } }
@media (max-width: 760px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 18px 36px; }
  .hero > .hero-art { position: static; order: -1; justify-self: end; align-items: center; gap: 8px; padding: 0; opacity: 1; }
  .hero .hero-text { padding-right: 0; }
  .hero-art .vert { writing-mode: horizontal-tb; font-size: calc(22px * var(--text-scale)); letter-spacing: .08em; line-height: 1.2; }
  .hero-art .vert i { margin: 0 .25em; }
  .hero-art .hero-seal { flex-direction: row; gap: 2px; margin-top: 0; font-size: calc(14px * var(--text-scale)); line-height: 1.3; padding: 4px 5px; border-radius: 2px; }
}
.hw-info { width: min(100%, 440px); min-height: 0; padding: 0; margin: 0 0 -20px auto; border: 0; border-radius: 0; background: transparent; text-align: right; position: relative; z-index: 1; }
.hw-info-title, .hw-info-sizer { font-size: calc(15px * var(--text-scale)); font-weight: 500; line-height: 1.4; }
.hw-info-labels { display: grid; }
.hw-info-labels > * { grid-area: 1 / 1; align-self: start; }
.hw-info-sizer { visibility: hidden; pointer-events: none; }
.hw-info-date { margin-top: 3px; font-size: calc(13px * var(--text-scale)); }
.hw-info-note { margin-top: 6px; font-size: calc(13.5px * var(--text-scale)); line-height: 1.5; }
/* Equal breathing room above the drawing and before the legend divider.
   The readout sits in the corner rather than changing the wheel's position. */
@media (min-width: 1100px) {
  .viz.wheel { position: relative; padding: 16px; }
  .wheel > .hw-info { position: absolute; top: 10px; right: 16px; margin: 0; }
  .wheel > .wheel-legend { margin-top: 16px; padding: 16px 0 0; }
}
[id^="hw-term-"], [id^="hw-harvest-"] { scroll-margin-top: 100px; }
[id^="hw-term-"]:focus-visible, [id^="hw-harvest-"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 3px; }
.almanac li { padding-inline: 8px; cursor: pointer; border-radius: 3px; }
.almanac li:is(:focus-visible, .is-selected) { background: var(--wash); box-shadow: inset 0 0 0 1px var(--accent); }
@media (hover: hover) and (pointer: fine) { .almanac:not(.is-locked) li:hover { background: var(--wash); box-shadow: inset 0 0 0 1px var(--accent); } }
@media (max-width: 760px) { .hw-info { min-height: 0; margin-bottom: 8px; } }
/* Month names are sized in drawing units, so what the reader sees follows the drawing's width (about 300–680 px,
   380 in the short expanded view): each step below keeps them near 12 px rendered, and the ring has room for all of them. */
.hwheel .hw-month { font-size: 16.5px; }
@media (max-width: 540px) {
  .viz.wheel { margin-inline: -8px; padding: 0; border: 0; background: transparent; }
  .hw-info { width: calc(100% - 16px); margin-inline: 8px; margin-bottom: 10px; }
  .wheel-legend { margin-inline: 8px; }
  .hwheel .hw-month { font-size: 26px; letter-spacing: 0; }
  .hwheel .hw-term-name { font-size: 26px; }
  .hwheel .hw-term-name text:first-child { transform: translateY(-4px); }
  .hwheel .hw-term-name text:nth-child(2) { transform: translateY(4px); }
  .hwheel .hw-center-labels { transform: scale(var(--hw-cl-k, 1.18)); }
}
@media (min-width: 401px) and (max-width: 540px) { .hwheel .hw-month { font-size: 22px; } }
.guide section[id], #picking-year, #six-categories, #processing, #guides { scroll-margin-top: var(--category-anchor-offset, 76px); }
/* The standalone tool is a workspace: keep the drawing and calendar together. */
.shell:has(.picking-year-page) { max-width:1600px; grid-template-columns:minmax(0,1fr); gap:0; padding-top:8px; }
.picking-year-page { --stack-gap:8px; }
.picking-year-title { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 20px; }
.picking-year-title h1 { flex:0 1 auto; min-width:0; flex-basis:max-content; }
:root .picking-year-page .picking-year-title h1 { margin:0; font-size:calc(clamp(24px,2.8vw,28px) * var(--text-scale)); line-height:1.2; }
.picking-year-back { flex:0 1 auto; max-width:100%; min-height:44px; display:inline-flex; align-items:center; gap:5px; font-size:calc(14px * var(--text-scale)); color:var(--muted); text-decoration:none; }
.picking-year-back:hover { color:var(--ink); }
.picking-year-header .wheel-lead { margin:0; font-size:calc(14px * var(--text-scale)); line-height:1.5; }
.picking-year-page .viz.wheel { display:flex; flex-direction:column; padding-top:0; }
.picking-year-page .hwheel { order:0; }
@media(min-width:541px) and (max-width:1099px) {
  .picking-year-page .viz.wheel { padding-top:clamp(16px, 2vw, 22px); }
}
.picking-year-page .wheel > .hw-info { position:static; order:1; display:flex; justify-content:space-between; align-items:baseline; gap:12px; width:calc(100% - 16px); max-width:680px; margin:8px auto 0; text-align:start; }
.picking-year-page .hw-info-labels { flex:1; min-width:0; }
.picking-year-page .hw-info-date { flex:none; margin:0; }
.picking-year-page .wheel > .wheel-legend { order:2; align-self:center; width:calc(100% - 16px); max-width:680px; box-sizing:border-box; margin:12px auto 0; padding:12px 4px 4px; }
@media(min-width:761px) {
  .picking-year-page { --text-scale: 1.15; font-size: calc(var(--fs-body) * var(--text-scale)); }
  .shell:has(.picking-year-page) > .rail { display:none; }
}
@media(min-width:1000px) {
  .picking-year-page #picking-year { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:24px; align-items:start; }
  .picking-year-page .viz.wheel { padding:8px 12px; }
  .picking-year-page .hwheel { max-width:clamp(380px,calc(100svh - 300px),680px) !important; }
  .picking-year-page .hwheel .hw-month { --hw-mw:17px; --hw-mh:21px; font-size:max(var(--hw-mw), var(--hw-mh)); }
  .picking-year-page .wheel > .hw-info, .picking-year-page .wheel > .wheel-legend { width:100%; }
  .picking-year-page .wheel > .hw-info { margin-top:4px; }
  .picking-year-page .wheel > .wheel-legend { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 18px; margin-top:8px; padding:8px 0 0; }
  .picking-year-page .almanac { grid-template-columns:repeat(2,minmax(0,1fr)); margin:0; }
  .picking-year-page .alm-s { padding:10px 10px 6px; }
  .picking-year-page .alm-s:nth-child(2n) { border-right:0; }
  .picking-year-page .alm-s:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .picking-year-page .alm-h { margin-bottom:6px; }
  .picking-year-page .almanac li { min-height:44px; padding:4px; gap:6px; }
  .picking-year-page .alm-m { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 6px; font-size:calc(14px * var(--text-scale)); line-height:1.35; }
  .picking-year-page .alm-m > b { font-weight:500; }
  .picking-year-page .alm-m > i { grid-column:1; font-size:calc(12px * var(--text-scale)); }
  .picking-year-page .alm-d { grid-column:2; grid-row:1 / 3; align-self:center; width:auto; font-size:calc(12px * var(--text-scale)); }
  .picking-year-page .alm-n { grid-column:1 / -1; font-size:calc(12px * var(--text-scale)); }
}
/* On the expanded view the drawing is as wide as the narrower of its column and the window height allows. */
@media (min-width:1280px) { .picking-year-page .hwheel .hw-month { --hw-mw:15px; } }
@media (min-width:1440px) { .picking-year-page .hwheel .hw-month { --hw-mw:13px; } }
@media (min-width:1000px) and (min-height:780px) { .picking-year-page .hwheel .hw-month { --hw-mh:17px; } }
@media (min-width:1000px) and (min-height:900px) { .picking-year-page .hwheel .hw-month { --hw-mh:14px; } }
/* Mid-size windows. Below 1000px the drawing, its caption and its key sit in one card of a single measure
   (no wide empty margins); from 1000px the drawing stays in view beside the almanac while the almanac is read. */
.picking-year-page .wheel-lead { text-wrap: pretty; }
@media (min-width:761px) and (max-width:999px) {
  .picking-year-page .viz.wheel { width:100%; max-width:664px; margin-inline:auto; }
  .picking-year-page .wheel > .hw-info, .picking-year-page .wheel > .wheel-legend { width:100%; max-width:none; margin-inline:0; }
  .picking-year-page .almanac { margin-top:20px; }
}
@media (min-width:1000px) and (max-width:1279px) {
  .picking-year-page .hwheel { max-width:clamp(380px,calc(100svh - 84px - 300px),680px) !important; }
  .picking-year-page .wheel > .wheel-legend { grid-template-columns:minmax(0,1fr); gap:6px; }
}
@media (min-width:1000px) and (max-width:1099px) {
  .picking-year-page .hwheel .hw-term-name { font-size:21px; }
  .picking-year-page .hwheel .hw-term-name text:first-child { transform:translateY(-1.5px); }
  .picking-year-page .hwheel .hw-term-name text:nth-child(2) { transform:translateY(1.5px); }
  .picking-year-page .almanac { grid-template-columns:minmax(0,1fr); }
  .picking-year-page .alm-s, .picking-year-page .alm-s:nth-child(2n) { border-right:0; border-bottom:1px solid var(--line); }
  .picking-year-page .alm-s:last-child { border-bottom:0; }
}
@media (min-width:1000px) and (min-height:640px) {
  .picking-year-page .viz.wheel { position:sticky; top:84px; }
}
:root[data-theme="dark"] { --cup-glaze-hi: #626b5d; --cup-glaze-mid: #454d41; --cup-glaze-low: #293129; --cup-wall-low: #222b24; --cup-wall-mid: #45503f; --cup-wall-hi: #697460; --cup-edge: #7c8573; --cup-decoration: #a6ae96; --cup-highlight: #a3ae97; --cup-rim-opacity: .38; --cup-shine: .5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cup-glaze-hi: #626b5d; --cup-glaze-mid: #454d41; --cup-glaze-low: #293129; --cup-wall-low: #222b24; --cup-wall-mid: #45503f; --cup-wall-hi: #697460; --cup-edge: #7c8573; --cup-decoration: #a6ae96; --cup-highlight: #a3ae97; --cup-rim-opacity: .38; --cup-shine: .5; } }
:root:is(:lang(en), :lang(de), :lang(ru)) .hero .lead { text-align: start; text-align-last: auto; text-wrap: pretty; hyphens: manual; -webkit-hyphens: manual; }
/* The shorter Chinese introduction has its own measure and rhythm. */
:root:lang(zh) .hero-text { align-self: center; }
:root:lang(zh) .hero h1 { max-width: none; margin: 0 0 16px; line-height: 1.3; letter-spacing: .025em; }
:root:lang(zh) .hero .lead { max-width: 28em; line-height: 1.8; text-align: start; text-wrap: pretty; line-break: strict; overflow-wrap: normal; }
:root:lang(zh) .hero-intro { display: block; margin-bottom: 8px; text-wrap: balance; }
@media (max-width: 760px) {
  :root:lang(zh) .hero { gap: 16px; padding-bottom: 28px; }
  :root:lang(zh) .hero h1 { margin-bottom: 14px; }
  :root:lang(zh) .hero .lead { max-width: 30em; line-height: 1.75; }
  :root:lang(zh) .hero-intro { margin-bottom: 6px; }
}
:root[data-theme="dark"] .sec:is(:hover, :focus-visible) .sec-n { color: color-mix(in srgb, var(--muted) 70%, var(--ink)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sec:is(:hover, :focus-visible) .sec-n { color: color-mix(in srgb, var(--muted) 70%, var(--ink)); } }
:root .season { color: var(--ink); background: var(--surface); box-shadow: none; transition: border-color .18s ease, background-color .18s ease; }
:root .season:is(:hover, :focus-visible) { color: var(--ink); border-color: color-mix(in srgb, var(--celadon) 35%, var(--line-strong)); background: color-mix(in srgb, var(--wash) 65%, var(--surface)); box-shadow: none; text-decoration: none; }
.season:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { :root .season { transition: none; } }
.lang { position: relative; }
.lang-symbol { display: none; width: 20px; height: 20px; pointer-events: none; }
@media (max-width: 760px) {
  .top-in .lang { flex: 0 0 44px; width: 44px; height: 44px; }
  .top-in .lang select { width: 44px; max-width: 44px; min-width: 44px; padding: 0; gap: 0; font-size: 0; color: transparent; background-image: none; }
  .lang select::picker-icon { display: none; }
  .lang option { font-family: var(--f-body); font-size: calc(16px * var(--text-scale)); }
  .lang-symbol { display: block; position: absolute; left: 12px; top: 12px; color: var(--ink); }
}
@media (max-width: 379px) {
  .top-in .brand { gap: 5px; }
  .top-in .brand img { width: 32px; height: 32px; }
  .top-in .brand .seal { display: inline; font-size: calc(18px * var(--text-scale)); }
}

/* Botanical placement follows card width, keeping the brush characters clear. */
.hero { container-type: inline-size; height:auto; min-height:0; padding-block:clamp(22px, 3vw, 30px); row-gap:18px; }
.hero h1 { margin-top:0; }
.hero .hero-leaf { color:#61735e; position:absolute; z-index:0; left:auto; right:clamp(96px, 14%, 140px); bottom:8px; width:min(76%, 560px); height:calc(100% - 32px); pointer-events:none; opacity:.8; }
:root[data-theme="dark"] .hero .hero-leaf { color:#98a18b; opacity:.64; }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) .hero .hero-leaf { color:#98a18b; opacity:.64; } }
.hero-art .vert { filter:none; }
@media(max-width:760px) {
 .hero { padding-block:20px 24px; row-gap:16px; }
 .hero .hero-leaf { width:min(calc(100% - 24px), 480px); height:calc(100% - 76px); min-height:0; right:12px; bottom:12px; }
 .hero-leaf-side { display:inline; }
}
@container (max-width: 620px) {
 .hero > .hero-art { position:static; order:-1; grid-column:1 / -1; justify-self:end; display:flex; align-items:center; gap:10px; padding:0; }
 .hero-art .vert { writing-mode:horizontal-tb; font-size:clamp(26px, 7cqw, 38px); line-height:1; }
 .hero-art .vert i { margin:0 4px; }
 .hero-art .hero-seal { flex-direction:row; margin-top:0; font-size:calc(14px * var(--text-scale)); line-height:1.3; padding:4px 5px; }
 .hero > .hero-text { grid-column:1 / -1; padding-top:0; padding-right:0; align-self:start; }
 .hero .hero-leaf { right:12px; bottom:12px; width:min(calc(100% - 24px), 480px); height:calc(100% - 76px); min-height:0; }
 .hero-leaf-side { display:inline; }
}
@media(forced-colors:active), print { .hero .hero-leaf { display:none; } }
/* A shallow shadow grounds the botanical panel without lifting it into a card stack. */
.hero { box-shadow: 0 1px 2px rgb(42 37 28 / .035), 0 5px 16px -9px rgb(42 37 28 / .14); }
:root[data-theme="dark"] .hero { box-shadow: inset 0 1px 0 rgb(255 255 255 / .018), 0 5px 16px -9px rgb(0 0 0 / .34); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero { box-shadow: inset 0 1px 0 rgb(255 255 255 / .018), 0 5px 16px -9px rgb(0 0 0 / .34); } }
@media print, (forced-colors: active) { .hero { box-shadow: none !important; } }
/* END HERO LEAF PREVIEW */
.currency { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 44px; min-width: 54px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--bg); font: 400 calc(16px * var(--text-scale))/1 var(--f-body); }
.currency select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.currency option { color: var(--ink); background: var(--bg); font-size: 16px; }
#currency-code { display: none; }
#currency-symbol { font-family: var(--f-body); font-size: calc(16px * var(--text-scale)); font-weight: 500; line-height: 1.25; color: var(--ink); }
.currency-arrow { font-size: 11px; color: var(--muted); }
.currency:hover { border-color: var(--nav-hover); }
.currency:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
@media(max-width: 760px) { .currency { min-width: 44px; padding-inline: 5px; } }
/* Identical fixed chevrons in both header dropdowns, independent of browser UI. */
.nav-chevron { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.top-in .lang select { background-image: none; padding-inline-end: 30px; }
.lang select::picker-icon { display: none; }
.currency { padding-inline: 10px 27px; }
@media(max-width: 760px) {
  .top-in .lang select { padding: 0; }
  .lang-symbol { left: 5px; }
  .top-in .lang { border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
  .top-in .lang select { width: 100%; max-width: 100%; min-width: 0; min-height: 0; height: 100%; border: 0; background-color: transparent; border-radius: inherit; }
  .top-in .lang select:is(:hover, :focus-visible) { background-color: transparent; outline: none; box-shadow: none; }
  .top-in .lang:hover { border-color: var(--nav-hover); }
  .top-in .lang:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
  .lang-symbol { top: 50%; transform: translateY(-50%); }
  .currency { padding-inline: 7px 21px; }
  .top-in :is(.lang, .currency) .nav-chevron { right: 5px; width: 10px; height: 10px; }
}
@supports (appearance: base-select) {
  .currency select { opacity: 1; color: transparent; font-size: 0; background: transparent; border: 0; padding: 0; border-radius: inherit; }
  .currency select::picker-icon { display: none; }
  .currency select::picker(select) { opacity: 1; max-width: calc(100vw - 24px); }
  .currency option { font-family: var(--f-body); font-size: calc(16px * var(--text-scale)); }
}
.metric-scope { margin: 8px 0 0; font-size: calc(14px * var(--text-scale, 1)); line-height: 1.55; color: var(--muted); max-width: 46ch; overflow-wrap: anywhere; }
.plant-passport dd > div { margin-top: 4px; }
.craft-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-top: 16px; }
.craft-links h3 { font: inherit; font-weight: 600; margin: 0 0 6px; }
.craft-links p { margin: 0 0 8px; line-height: 1.65; }
@media (max-width: 600px) { .craft-links { grid-template-columns: 1fr; gap: 20px; } }
.context-panel { scroll-margin-top: 100px; }
.context-panel > p { max-width: 74ch; line-height: 1.7; }
.context-items { margin: 20px 0; padding: 0; list-style: none; display: grid; gap: 20px; }
.context-items > li { display: flex; align-items: flex-start; gap: 18px; min-width: 0; }
.context-items h3 { margin: 0 0 5px; font: inherit; font-weight: 600; }
.context-items p { margin: 0; line-height: 1.65; }
.context-item-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
#context-tea-year .context-items { grid-template-columns: 1fr; gap: 0; margin-block: 24px 8px; counter-reset: tea-year; }
#context-tea-year .context-items > li { display: block; padding: 24px 0; counter-increment: tea-year; }
#context-tea-year .context-items > li + li { border-top: 1px solid var(--line); }
#context-tea-year .context-items > li > div { min-width: 0; display: grid; grid-template-columns: minmax(12rem,1fr) minmax(0,2.5fr); column-gap: 32px; align-items: start; }
#context-tea-year .context-items h3 { grid-column: 1; grid-row: 1 / 3; margin: 0; font-size: calc(17px * var(--text-scale)); line-height: 1.45; text-wrap: pretty; }
#context-tea-year .context-items h3::before { content: counter(tea-year,decimal-leading-zero); display: block; margin-bottom: 8px; color: var(--muted); font: 500 calc(12px * var(--text-scale))/1.5 var(--f-body); font-variant-numeric: tabular-nums; }
#context-tea-year .context-items p, #context-tea-year .context-item-sources { grid-column: 2; }
#context-tea-year .context-items p { font-size: calc(16px * var(--text-scale)); line-height: 1.75; }
#context-tea-year .context-item-sources { margin-top: 12px; }
#context-tea-year .srcchip { display: inline-flex; align-items: baseline; gap: 4px; border: 1px solid var(--line); border-radius: var(--r); padding: 3px 8px; white-space: normal; overflow-wrap: normal; line-height: 1.5; }
#context-tea-year .srcchip .link-arrow { flex-shrink: 0; align-self: center; }
#context-tea-year .context-note { margin: 16px 0; padding: 16px 18px; background: var(--surface); border-radius: var(--r); color: var(--ink); font-size: calc(15px * var(--text-scale)); }
@media (max-width: 760px) {
  #context-tea-year .context-items > li { padding-block: 20px; }
  #context-tea-year .context-items > li > div { grid-template-columns: 1fr; gap: 10px; }
  #context-tea-year .context-items h3, #context-tea-year .context-items p, #context-tea-year .context-item-sources { grid-column: 1; grid-row: auto; }
  #context-tea-year .context-items h3::before { display: inline; margin: 0 10px 0 0; }
  #context-tea-year .context-item-sources { margin-top: 2px; }
}
.shoot-diagram { width: 64px; height: 84px; flex: 0 0 64px; color: var(--muted); }
.context-note { font-size: calc(14px * var(--text-scale)); color: var(--muted); }
.context-source { margin: 12px 0; }
.context-object { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); align-items: center; gap: 24px; margin: 20px 0; }
.context-object img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: contain; border-radius: 4px; background: #fff; }
.context-object figcaption { display: grid; gap: 8px; line-height: 1.6; }
.context-object figcaption strong { font-weight: 600; }
.context-object figcaption small { color: var(--muted); }
.landscape-layers { counter-reset: layer; }
.landscape-layers > li { counter-increment: layer; padding: 0 0 16px; border-bottom: 1px solid var(--line); }
.landscape-layers > li:last-child { border-bottom: 0; padding-bottom: 0; }
.landscape-layers > li::before { content: counter(layer, decimal-leading-zero); color: var(--muted); font-variant-numeric: tabular-nums; }
.local-usage { margin: 8px 0; }
.dictionary-link { display: inline-block; margin-top: 5px; }
@media(max-width: 600px) { .context-object { grid-template-columns: 1fr; gap: 12px; } .context-object img { max-width: 280px; } .context-panel { scroll-margin-top: 140px; } .context-items > li { gap: 12px; } }

/* Bibliographies share the page's quiet rules, without nested panel borders. */
.source-grid, .source-grid.grefs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px; row-gap:0; margin:0; padding:0; list-style:none; }
.source-grid.grefs { counter-reset:source-ref; }
.source-grid.grefs[start="7"] { counter-reset:source-ref 6; }
.source-grid > * { min-width:0; border-top:1px solid var(--line); padding:14px 0; }
.source-grid > .src:first-child { border-top:1px solid var(--line); }
.source-grid.grefs > li { position:relative; padding-left:28px; counter-increment:source-ref; scroll-margin-top:96px; }
.source-grid.grefs > li::before { content:counter(source-ref); position:absolute; left:0; top:16px; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.source-grid .src { font-size:calc(15px * var(--text-scale)); line-height:1.55; }
.source-grid li > .src { padding:0; border:0; }
.source-grid .meta { margin-top:4px; line-height:1.55; }
.note-topic-sources .cites { margin:0; }
.note-topic-sources { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.note-topic-sources > .reference-label { color:var(--muted); font-size:calc(13px * var(--text-scale)); }
.note-topic-sources > .reference-label { order:1; opacity:0; }
@media (hover:hover) and (pointer:fine) {
 .note-topic-sources > .reference-label { opacity:0; transition:opacity .12s ease; }
 .note-topic-sources:has(.cite:hover) > .reference-label,
 .note-topic-sources:focus-within > .reference-label { opacity:1; }
}
@media (hover:none) { .note-topic-sources > .reference-label { display:none; } }
@media (prefers-reduced-motion:reduce) { .note-topic-sources > .reference-label { transition:none; } }
.source-more > summary { display:flex; align-items:center; justify-content:space-between; gap:16px; width:fit-content; min-height:44px; margin:12px 0; padding:8px 14px; border:1px solid var(--line); border-radius:6px; cursor:pointer; list-style:none; font-size:calc(14px * var(--text-scale)); }
.source-more > summary::-webkit-details-marker { display:none; }
.source-more > summary:hover { border-color:var(--line-strong); background:var(--accent-soft); }
.source-more > summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.source-hide, .source-more[open] .source-show { display:none; }
.source-more[open] .source-hide { display:inline; }
.source-more[open] .source-chevron { transform:rotate(180deg); }
@media(max-width:760px) { .source-grid, .source-grid.grefs { grid-template-columns:minmax(0,1fr); } .source-grid.grefs > li { scroll-margin-top:148px; } }
@media print { .source-more > summary { display:none; } .source-more::details-content { content-visibility:visible; display:block; } }

.check-summary .check-passed { background:var(--ok-soft); border-color:color-mix(in srgb,var(--ok) 24%,var(--line)); }
.check-summary .check-passed dd { display:flex; align-items:center; gap:10px; font-size:calc(17px * var(--text-scale)); font-weight:500; line-height:1.4; color:var(--ok); }
.check-passed svg { flex:none; }
.check-attention dd { color:var(--bad); }
@media(max-width:480px) { .check-summary .check-passed dd { align-items:flex-start; flex-direction:column; font-size:calc(16px * var(--text-scale)); } }
.check-summary .check-progress { background:var(--info-soft); border-color:color-mix(in srgb,var(--info) 24%,var(--line)); }
.check-summary .check-progress dd { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; color:var(--info); }
.check-progress-label { display:inline-flex; align-items:center; gap:7px; font-size:calc(14px * var(--text-scale)); font-weight:500; line-height:1.4; }
.check-progress-label svg { flex:none; }
.source-search { display:grid; gap:8px; position:relative; }
.source-search label { font-weight:500; }
.source-search input { width:100%; min-height:46px; padding:10px 54px 10px 14px; border:1px solid var(--line-strong); border-radius:6px; background:var(--surface); color:var(--ink); font:inherit; font-size:16px; }
.source-search input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.source-search output { position:absolute; right:14px; bottom:12px; color:var(--muted); pointer-events:none; font-size:14px; }
.source-category { border-bottom:1px solid var(--line); }
.source-category:first-child { border-top:1px solid var(--line); }
.source-category > summary { display:flex; align-items:center; gap:12px; padding:18px 0; min-height:52px; cursor:pointer; list-style:none; font-weight:500; }
.source-category > summary::-webkit-details-marker { display:none; }
.source-category > summary::after { content:'+'; margin-left:auto; color:var(--muted); font-weight:400; }
.source-category[open] > summary::after { content:'−'; }
.source-category > summary:hover { color:var(--accent); }
.source-category > summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.source-directory-entry .src { padding:0; border:0; }
.source-usage { margin-top:8px; font-size:calc(13.5px * var(--text-scale)); line-height:1.6; overflow-wrap:anywhere; }
.source-usage > span { color:var(--muted); }
.source-directory [hidden] { display:none !important; }
.offer-details { margin-top: 8px; font-size: calc(14px * var(--text-scale)); white-space: normal; }
.offer-details summary, .date-context summary, .claim-evidence summary { cursor: pointer; color: var(--muted); width: fit-content; line-height: 1.6; }
.offer-details summary:hover, .date-context summary:hover, .claim-evidence summary:hover { color: var(--ink); }
.offer-details summary:focus-visible, .date-context summary:focus-visible, .claim-evidence summary:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.offer-details dl { margin: 12px 0; display: grid; gap: 10px; }
.offer-details dl > div { display: grid; grid-template-columns: minmax(80px, 0.8fr) minmax(0, 1.5fr); gap: 12px; }
.offer-details dt { color: var(--muted); }
.offer-details dd { margin: 0; overflow-wrap: anywhere; }
.offer-details p { line-height: 1.6; margin: 10px 0; }
.date-context { margin-top:16px; }
/* Quiet, consistent disclosure chevrons for supporting explanations. */
:is(.date-context,.offer-details,.claim-evidence) > summary { display:flex; align-items:baseline; gap:9px; list-style:none; }
:is(.date-context,.offer-details,.claim-evidence) > summary::-webkit-details-marker { display:none; }
:is(.date-context,.offer-details,.claim-evidence) > summary::marker { content:''; }
:is(.date-context,.offer-details,.claim-evidence) > summary::before { content:''; flex:0 0 6px; width:6px; height:6px; box-sizing:border-box; border-inline-end:1.5px solid var(--muted); border-top:1.5px solid var(--muted); transform:translateY(-1px) rotate(45deg); transform-origin:center; transition:transform .16s ease; }
:is(.date-context,.offer-details,.claim-evidence)[open] > summary::before { transform:translateY(-2px) rotate(135deg); }
@media(prefers-reduced-motion:reduce) { :is(.date-context,.offer-details,.claim-evidence) > summary::before { transition:none; } }

.facts-notes { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 24px; margin-top:12px; color:var(--muted); font-size:calc(14px * var(--text-scale)); }
.facts-notes:empty { display:none; }
.facts-notes .date-context { margin-top:0; }
.facts-notes .date-context[open] { flex-basis:100%; }
.vendor-stated-facts { margin-top:20px; padding-top:14px; border-top:1px solid var(--line); }
:root .vendor-stated-facts > p { margin:0 0 12px; padding:0; border:0; font-family:var(--f-body); font-size:calc(14px * var(--text-scale)); font-weight:500; line-height:1.5; color:var(--muted); }
.vendor-stated-facts .facts { margin:0; }
.date-context p { max-width: 70ch; line-height: 1.65; }
@media(max-width: 400px) { .offer-details dl > div { grid-template-columns: 1fr; gap: 2px; } }
.check-summary .check-progress { display:flex; flex-direction:column; align-items:stretch; gap:0; }
.check-summary .check-progress dd { margin:auto 0 0; padding-top:8px; }
.check-summary .check-progress-label { display:flex; align-items:center; gap:10px; font-size:calc(17px * var(--text-scale)); font-weight:500; line-height:1.4; }
.check-summary dt { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.check-note-count { flex:none; font-size:calc(13px * var(--text-scale)); color:var(--info); font-variant-numeric:tabular-nums; }
@media(max-width:480px) { .check-summary .check-passed dd, .check-summary .check-progress-label { flex-direction:row; align-items:center; font-size:calc(16px * var(--text-scale)); } }
.check-summary .check-progress dd { justify-content:space-between; flex-wrap:nowrap; gap:12px; }
.check-summary .check-note-count { font-size:calc(28px * var(--text-scale)); line-height:1; font-weight:500; }
.lead.check-intro { max-width:none; text-wrap:pretty; }
.sensory-prompt { margin-top: 22px; padding: 16px 18px; background: var(--wash); border-radius: 5px; }
.sensory-prompt h3 { font: inherit; font-weight: 600; margin: 0 0 6px; }
.sensory-prompt p { margin: 0 0 8px; line-height: 1.65; }
.sensory-links { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; margin-top: 10px; }
.claim-evidence { margin: 0 0 18px; }
.claim-evidence ol { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 18px; }
.claim-evidence li { padding: 14px 16px; background: var(--wash); border-radius: 4px; }
.claim-evidence li p { margin: 0 0 8px; line-height: 1.65; }
.claim-evidence li p:last-child { margin-bottom: 0; }
.evidence-claim { font-weight: 500; }
.evidence-label { color: var(--muted); }
.ct-card { grid-template-columns:auto minmax(0,1fr); }
.ct-card > div, .ct-form label, .ct-row { min-width:0; }
.ct-form input, .ct-form select, .ct-form textarea { width:100%; min-width:0; max-width:100%; box-sizing:border-box; }
.check-summary .check-passed dd, .check-summary .check-progress dd { min-height:36px; }
.gtoc { border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; }
.gtoc .eyebrow { display:flex; align-items:center; gap:10px; }
.gtoc ol { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 24px; }
.gtoc li { min-width:0; }
.gtoc a { width:fit-content; max-width:calc(100% + 12px); box-sizing:border-box; min-height:44px; padding:5px 6px; margin-inline:-6px; gap:12px; line-height:1.5; border-radius:var(--r); transition:background-color .14s ease,color .14s ease; }
@media(hover:hover) and (pointer:fine) { .gtoc a { min-height:34px; } }
@media(hover:hover) and (pointer:fine) { .gtoc a:hover { color:var(--ink); background:var(--wash); } }
.gtoc a:active { color:var(--ink); background:var(--wash); }
.gtoc a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; background:var(--wash); }
@media(prefers-reduced-motion:reduce) { .gtoc a { transition:none; } }
/* Chinese section numerals need enough size and stroke weight to scan clearly;
   reserve three characters for 二十一 and honour the reader's larger-text setting. */
.gtoc a span { flex:0 0 3em; font-family:var(--f-body); font-size:calc(17px * var(--text-scale)); font-weight:600; line-height:1.35; white-space:nowrap; }
.gtoc .guide-more > summary { margin-bottom:0; color:var(--ink); }
.gtoc .guide-more > summary:hover { background:var(--wash); }
.gtoc .guide-more[open] > summary { margin-bottom:12px; }
@media(max-width:760px) { .gtoc ol { grid-template-columns:minmax(0,1fr); gap:2px; } }
.guide-series { display:flex; flex-wrap:wrap; gap:8px; }
.guide-series a { display:flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid var(--line); border-radius:6px; color:var(--muted); text-decoration:none; font-size:calc(14px * var(--text-scale)); line-height:1.4; }
.guide-series a > span:first-child { font-family:var(--f-display); font-size:18px; color:var(--seal-text); }
.guide-series a[aria-current="page"] { color:var(--ink); background:color-mix(in srgb,var(--ink) 4%,transparent); }
.guide-series a:hover { border-color:color-mix(in srgb,var(--ink) 30%,var(--line)); color:var(--ink); }
.gtoc-grouped { padding-bottom:8px; }
.guide-topic { border:0; }
.guide-topic + .guide-topic { border-top:1px solid var(--line); }
.guide-topic > summary { display:flex; align-items:center; gap:12px; min-height:48px; padding:10px 0; list-style:none; cursor:pointer; font-size:calc(15px * var(--text-scale)); line-height:1.5; }
.guide-topic > summary::-webkit-details-marker { display:none; }
.guide-topic > summary > span:first-child { flex:1; }
.guide-topic > summary:hover { color:var(--accent); }
.guide-topic[open] .source-chevron { transform:rotate(180deg); }
.guide-topic ol { margin:0 0 14px; }
.guide-series a { min-width:0; overflow-wrap:anywhere; }
.gongfu-troubleshooting { margin-top:16px; }
@media(max-width:600px) {
  .gongfu-troubleshooting .table-scroll-hint { display:none; }
  .gongfu-troubleshooting .tbl { overflow:visible; border:0; }
  .gongfu-troubleshooting table, .gongfu-troubleshooting tbody { display:block; width:100%; min-width:0; }
  .gongfu-troubleshooting thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .gongfu-troubleshooting tr { display:block; padding:14px 0; border-top:1px solid var(--line); }
  .gongfu-troubleshooting th, .gongfu-troubleshooting td { display:block; width:auto; min-width:0; padding:6px 0; border:0; white-space:normal; }
  .gongfu-troubleshooting td::before { content:attr(data-column); display:block; margin-bottom:3px; color:var(--muted); font-size:.85em; }
}
.guide-moved { display:none; }
.guide-moved:target { display:block; }
@media(max-width:520px) { .guide-series { display:grid; grid-template-columns:minmax(0,1fr); } }


/* Homepage catalogue cards: a quiet, coordinated response without layout movement. */
.home .secs .sec { transition: border-color .22s ease, background-color .22s ease; }
.home .secs .sec .sec-n { transition: color .22s ease; }
.home .secs .sec:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.home .secs .sec:focus-visible { border-color: color-mix(in srgb, var(--ink) 24%, var(--line)); background: color-mix(in srgb, var(--ink) 3%, var(--surface)); }
@media (hover: hover) and (pointer: fine) {
  .home .secs .sec:hover { border-color: color-mix(in srgb, var(--ink) 24%, var(--line)); background: color-mix(in srgb, var(--ink) 3%, var(--surface)); box-shadow: none; }
  .home .secs .sec:hover .sec-ch { color: var(--seal); opacity: .10; }
}
.home .secs .sec:focus-visible .sec-ch { color: var(--seal); opacity: .10; }
@media (hover: none) {
  .home .secs .sec:hover { background: var(--surface); border-color: var(--line); }
  .home .secs .sec:hover .sec-ch { color: var(--ink); opacity: .055; }
}
@media (prefers-reduced-motion: reduce) { .home .secs .sec, .home .secs .sec .sec-n, .home .secs .sec .sec-ch { transition: none; } }

/* Entry identity is quiet metadata, distinct from an evidence status. */
.entry-id { display: inline-flex; flex-wrap: nowrap; align-items: baseline; gap: 5px; max-width: 100%; min-width: 0; padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-size: calc(13px * var(--text-scale)); line-height: 1.5; white-space: nowrap; }
.entry-id > span { flex: none; color: color-mix(in srgb, var(--muted) 70%, var(--ink)); font-family: var(--f-body); font-size: inherit; font-weight: 600; line-height: inherit; }
.entry-id code { min-width: 0; background: none; border: 0; padding: 0; color: var(--muted); font-size: inherit; line-height: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry-id-disclosure { position: relative; min-width: 0; max-width: min(100%, 34ch); }
.entry-id-disclosure > summary { list-style: none; cursor: pointer; white-space: nowrap; width: 100%; }
.entry-id-disclosure > summary::-webkit-details-marker { display: none; }
.entry-id-disclosure > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.entry-id-full { position: absolute; z-index: 5; inset-inline: 0; top: calc(100% + 6px); padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); box-shadow: 0 5px 18px color-mix(in srgb, var(--ink) 10%, transparent); }
.entry-id-full code { padding: 0; background: none; font-size: calc(13px * var(--text-scale)); overflow-wrap: anywhere; user-select: all; }
/* Shared small controls respond through tone and outline, without changing size. */
.otp a, .otp-toggle, a.chip, .seg button { transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
@media (hover: hover) and (pointer: fine) {
 .otp a:hover, .otp-toggle:hover, a.chip:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, var(--surface)); border-color: color-mix(in srgb, var(--ink) 27%, var(--line)); text-decoration: none; box-shadow: none; }
 .seg button:not([aria-pressed="true"]):hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, var(--surface)); }
}
.otp a:focus-visible, .otp-toggle:focus-visible, a.chip:focus-visible, .seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg button:focus-visible { outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .otp a, .otp-toggle, a.chip, .seg button { transition: none; } }
/* Currency choices stay quiet; selection is a small weight and surface change. */
.seg.seg-currency { padding: 3px; gap: 2px; background: transparent; border-color: var(--line); border-radius: 6px; }
.seg.seg-currency button { border: 0; border-radius: 3px; color: var(--ink); font-weight: 400; background: transparent; box-shadow: none; }
.seg.seg-currency button[aria-pressed="true"] { background: color-mix(in srgb, var(--ink) 4%, transparent); font-weight: 500; box-shadow: none; }
@media (hover: hover) {
  .seg.seg-currency button:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 3%, transparent); }
  .seg.seg-currency button[aria-pressed="true"]:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
}
@media (forced-colors: active) { .seg.seg-currency button[aria-pressed="true"] { outline: 1px solid Highlight; outline-offset: -2px; } }


.home-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px 18px; flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.home-section-heading h2 { margin: 0; padding: 0; border: 0; flex: 1 1 auto; }
.home-section-heading > a { flex: none; color: var(--muted); font-size: calc(14px * var(--text-scale)); line-height: 1.3; min-height: 40px; padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--r); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: background-color .15s, border-color .15s; }
.home-section-heading > a:is(:hover, :focus-visible) { color: var(--ink); background: var(--wash); border-color: var(--line-strong); text-decoration: none; }
.home-section-heading > a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.home-section-heading .home-link-label { text-decoration: none; }
.home-section-heading .link-arrow { flex: none; }
.home-guides { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
/* Pair title and description baselines without letting the hover surface touch text. */
.home-guides > a { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 8px; min-width: 0; padding: 22px 24px; color: var(--ink); background: var(--surface); text-decoration: none; border: 1px solid var(--line); border-radius: var(--r); transition: background-color .18s ease, border-color .18s ease; }
.home-guides > a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-color: color-mix(in srgb, var(--ink) 24%, var(--line)); background: color-mix(in srgb, var(--ink) 3%, var(--surface)); }

.home-guides h3 { margin: 0; font-family: var(--f-display); font-size: calc(22px * var(--text-scale)); line-height: 1.3; }
.home-guides p { margin: 0; max-width: none; text-wrap: pretty; color: var(--muted); font-size: calc(15px * var(--text-scale)); line-height: 1.65; }
.home-tool-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.home-tool-grid > a { position: relative; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); text-decoration: none; transition: background-color .18s ease, border-color .18s ease; }
.home-tool-grid strong { display: block; margin-bottom: 6px; font-weight: 500; line-height: 1.4; }
.home-tool-grid span { display: block; font-size: calc(14px * var(--text-scale)); line-height: 1.6; color: var(--muted); }
.home-evidence-panel { display: grid; gap: 24px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); text-decoration: none; transition: border-color .18s ease, background-color .18s ease; }
a.home-evidence-panel:is(:hover, :focus-visible) { color: var(--ink); text-decoration: none; }
@media (hover: hover) { a.home-evidence-panel:hover { border-color: color-mix(in srgb, var(--ink) 24%, var(--line)); background-color: color-mix(in srgb, var(--ink) 2%, transparent); } }
a.home-evidence-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.home-evidence-copy, .home-evidence-visual { min-width: 0; }
.home-evidence-visual { container: evidence / inline-size; }
.home-evidence-panel :is(p,dt) { hyphens: none; text-wrap: pretty; }
.home-evidence-note { margin: 0; font-size: calc(15px * var(--text-scale)); color: var(--muted); line-height: 1.7; text-wrap: pretty; }
.home-evidence-stats { display: grid; gap: 16px; margin: 0; }
.home-evidence-stats > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 7px 12px; min-width: 0; }
.home-evidence-stats dt { color: var(--muted); font-size: calc(14px * var(--text-scale)); line-height: 1.5; }
.home-evidence-stats dd { margin: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 4px 10px; font-family: var(--f-body); font-size: calc(23px * var(--text-scale)); font-weight: 500; line-height: 1.2; font-variant-numeric: lining-nums tabular-nums; color: var(--ink); }
.home-evidence-share { min-width: 4.5ch; color: var(--muted); font-size: calc(13px * var(--text-scale)); font-weight: 400; text-align: right; }
.home-evidence-track { grid-column: 1 / -1; position: relative; height: 3px; margin-inline: 4px; background: var(--line); border-radius: 2px; }
.home-evidence-track > i { display: block; height: 100%; width: var(--evidence-position); border-radius: inherit; background: var(--evidence-color); }
.home-evidence-axis { position: relative; height: 20px; margin: 12px 4px 0; color: var(--muted); font-size: calc(11px * var(--text-scale)); line-height: 1.4; font-variant-numeric: tabular-nums; }
.home-evidence-axis span { position: absolute; left: var(--tick); transform: translateX(-50%); }
.home-evidence-axis span:first-child { transform: none; }
.home-evidence-axis span:last-child { transform: translateX(-100%); }
.home-sourcing { margin: 0; padding-top: 16px; border-top: 1px solid var(--line); max-width: none; color: var(--muted); font-size: calc(15px * var(--text-scale)); line-height: 1.7; text-wrap: pretty; }
.home-sourcing a { color: var(--ink); white-space: nowrap; }
.home-evidence-scale { margin: 5px 0 0; color: var(--muted); font-size: calc(12px * var(--text-scale)); line-height: 1.5; }
@container (min-width: 740px) { .home-evidence-panel { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: center; } }
@container (max-width: 420px) { .home-evidence-panel { padding: 18px; gap: 24px; } }
.listing-load-error { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--wash); color: var(--ink); }
.listing-load-icon { display: inline-flex; flex: none; align-items: center; color: var(--muted); }
.listing-load-message { flex: 1 1 180px; margin: 0; max-width: none; font-size: calc(15px * var(--text-scale)); line-height: 1.5; text-wrap: pretty; }
.listing-load-error button { flex: none; min-height: 44px; padding: 9px 14px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--ink); font: inherit; font-size: calc(14px * var(--text-scale)); line-height: 1.4; cursor: pointer; }
.listing-load-error button:is(:hover,:focus-visible) { background: var(--bg); border-color: var(--muted); }
.listing-load-error button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media(max-width:480px) { .listing-load-error { padding: 16px; gap: 10px; } .listing-load-error button { margin-inline-start: 32px; } }
#tea-map, #wrapper-decoder { scroll-margin-top: 96px; }
@media (hover: hover) and (pointer: fine) { .home-guides > a:hover, .home-tool-grid > a:hover { background: color-mix(in srgb, var(--ink) 3%, var(--surface)); } .home-guides > a:hover { border-color: color-mix(in srgb, var(--ink) 24%, var(--line)); } .home-tool-grid > a:hover { border-color: var(--line-strong); } }
@media (max-width: 760px) { .home-guides, .home-tool-grid { grid-template-columns: minmax(0,1fr); } .home-guides { gap: 12px; } .home-guides > a { grid-row: auto; grid-template-rows: auto auto; row-gap: 7px; padding: 18px; } .home-section-heading > a { min-height: 44px; } #tea-map, #wrapper-decoder { scroll-margin-top: 148px; } }
@media (prefers-reduced-motion: reduce) { .home-guides > a, .home-tool-grid > a { transition: none; } }
/* Narrow phones keep two intentional header rows, with full-size touch controls. */
.production-collection { container-type: inline-size; }
.production-collection-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.production-collection-h h2 { margin: 0; padding: 0; border: 0; font-size: calc(24px * var(--text-scale)); }
.production-collection-h h2 a { color: var(--ink); text-decoration: none; }
.production-collection-h h2 a:hover { color: var(--accent); }
.production-table { width: 100%; min-width: 0 !important; table-layout: fixed; }
.production-table thead th:first-child { width: 66%; }
.production-table thead th:nth-child(2) { width: 18%; }
.production-table thead th:last-child { width: 16%; }
.production-table tbody :is(th, td) { padding: 18px 10px; vertical-align: top; border-bottom: 1px solid var(--line); }
.production-table tbody th { text-align: start; font-weight: 400; text-transform: none; letter-spacing: normal; white-space: normal; overflow-wrap: anywhere; }
.production-table :is(th, td):first-child { padding-inline-start: 12px; }
.production-table :is(th, td):last-child { padding-inline-end: 12px; text-align: end; }
.production-title { color: var(--ink); font-size: calc(17px * var(--text-scale)); font-weight: 500; line-height: 1.45; text-decoration: none; }
.production-title:hover { color: var(--accent); text-decoration: underline; }
.production-secondary { display: block; margin-top: 5px; color: var(--muted); font-size: calc(15px * var(--text-scale)); line-height: 1.5; font-weight: 400; }
.production-identity p { margin: 8px 0 0; max-width: 68ch; color: var(--muted); font-size: calc(14.5px * var(--text-scale)); line-height: 1.65; }
.production-format { color: var(--muted); font-size: calc(14px * var(--text-scale)); line-height: 1.6; font-variant-numeric: tabular-nums; }
.production-field-label { display: none; }
.production-status .pill { white-space: normal; text-align: start; }
@container (max-width: 640px) {
  .production-table, .production-table tbody { display: block; }
  .production-table thead { display: none; }
  .production-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; padding: 18px 10px; border-top: 1px solid var(--line); }
  .production-table tbody :is(th, td) { display: block; padding: 0; border: 0; }
  .production-identity { grid-column: 1 / -1; }
  .production-format { align-self: center; }
  .production-field-label { display: inline; margin-inline-end: 6px; }
  .production-table .production-status { text-align: end; align-self: center; }
}
@media (max-width: 379px) {
  .top-in { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 44px); gap: 8px 6px; }
  .top-in .brand { grid-column: 1; grid-row: 1; }
  .top-in .lang { grid-column: 2; grid-row: 1; }
  .top-in .currency { grid-column: 3; grid-row: 1; min-width: 0; width: 44px; }
  .top-in .text-size-btn { grid-column: 4; grid-row: 1; }
  .top-in .theme-btn { grid-column: 5; grid-row: 1; }
  .top-in .search { grid-column: 1 / 5; grid-row: 2; min-width: 0; order: 0; }
  .top-in .menu-btn { grid-column: 5; grid-row: 2; width: 44px; }
}
.search-toggle { display: none; }
@media (max-width: 760px) {
  html.js .top-in { display: flex; gap: 8px 6px; }
  html.js .top-in .jieqi { display: none; }
  html.js .top-in .search { display: none; }
  html.js .top-in.search-open .search { display: flex; order: 10; flex: 1 0 100%; }
  html.js .top-in .search-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
  html.js .top-in .search-toggle:hover { border-color: var(--nav-hover); }
  html.js .top-in .search-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  html.js .top-in .search-toggle[aria-expanded="true"] { border-color: var(--line-strong); background: var(--wash); }
  html.js .top-in .menu-btn { width: 44px; min-width: 44px; padding: 0; }
  html.js .top-in .menu-btn .mb-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (max-width: 479px) {
  html.js .top-in { display: grid; grid-template-columns: minmax(64px, 1fr) repeat(5, 44px); gap: 8px 2px; padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px)); }
  html.js .top-in .brand { grid-column: 1; grid-row: 1; justify-self: start; min-height: 44px; }
  html.js .top-in .brand { gap: 4px; }
  html.js .top-in .brand .name { display: none; }
  html.js .top-in .brand .seal { display: inline; font-size: 16px; }
  html.js .top-in .brand img { width: 28px; height: 28px; }
  html.js .top-in .search-toggle { grid-column: 2; grid-row: 1; }
  html.js .top-in .lang { grid-column: 3; grid-row: 1; }
  html.js .top-in .currency { display: none; }
  html.js .top-in .text-size-btn { grid-column: 4; grid-row: 1; }
  html.js .top-in .theme-btn { grid-column: 5; grid-row: 1; }
  html.js .top-in .menu-btn { grid-column: 6; grid-row: 1; }
  html.js .top-in :is(.search-toggle, .lang, .currency, .text-size-btn, .theme-btn, .menu-btn) { width: 100%; }
  html.js .top-in.search-open .search { grid-column: 1 / -1; grid-row: 2; }
}
/* Edge-aligned navigation drawer; the backdrop remains a dismiss target. */
.sheet { display: flex; justify-content: flex-end; padding: 0; overflow: hidden; background: transparent; transition: background-color 240ms ease; }
.sheet[hidden] { display: none; }
.sheet.is-open { background: rgb(0 0 0 / .22); }
.sheet .sheet-in { flex: 0 1 400px; width: calc(100% - 24px); max-width: calc(100% - 24px); height: 100%; margin: 0; overflow-y: auto; overscroll-behavior: contain; border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) 16px; transform: translateX(100%); transition: transform 240ms cubic-bezier(.22, .7, .2, 1); box-shadow: -8px 0 32px rgb(0 0 0 / .08); }
.sheet.is-open .sheet-in { transform: translateX(0); }
.sheet .sheet-head { top: -1px; }
@media (prefers-reduced-motion: reduce) { .sheet, .sheet .sheet-in { transition: none; } }


:root:lang(ja) {
  --f-body: "Source Sans 3", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --f-display: "Cormorant Garamond", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --lh-body: 1.85; --measure: 38em;
}
:root:lang(ja) :is(h1,h2,h3) { line-height: 1.45; word-break: normal; overflow-wrap: break-word; line-break: strict; hyphens: none; }
:root:lang(ja) .hero .lead { text-align: start; line-break: strict; word-break: normal; hyphens: none; }
/* Autonyms keep their own script's typography, regardless of the current page. */
.lang option { font-family: "Source Sans 3", system-ui, sans-serif; font-weight: 400; line-height: 1.5; letter-spacing: normal; white-space: nowrap; }
.lang :is(select, option)[lang="zh-Hans"] { font-family: "Source Sans 3", "Noto Sans SC", "PingFang SC", sans-serif; }
.lang :is(select, option)[lang="zh-Hant"] { font-family: "Source Sans 3", "Noto Sans TC", "PingFang TC", sans-serif; }
.lang :is(select, option)[lang="ja"] { font-family: "Source Sans 3", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; }
@supports (appearance: base-select) {
  /* Optical alignment of 日; keep option boxes and checkmarks unchanged. */
  .lang option[lang="ja"] { padding-inline-start: calc(12px - .0625em); }
}
.lang :is(select, option):is([lang="en"], [lang="de"], [lang="ru"]) { font-family: "Source Sans 3", system-ui, sans-serif; }
/* Optical lockup: the Han character, capitals and teapot share a visual centre. */
.brand { gap: 6px; --brand-letter-top: color-mix(in srgb, currentColor 96%, white); --brand-letter-base: color-mix(in srgb, currentColor 98%, var(--seal-text)); }
.brand-wordmark { display: block; width: auto; height: 41.5px; flex: none; color: inherit; shape-rendering: geometricPrecision; }
:root { --brand-hover-ink: #7d4630; }
:root[data-theme="dark"] { --brand-hover-ink: #d9a07c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --brand-hover-ink: #d9a07c; } }
.brand, .foot-identity > a { transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .brand:hover, .foot-identity > a:has(.brand-wordmark):hover { color: var(--brand-hover-ink); }
}
.brand:focus-visible, .foot-identity > a:has(.brand-wordmark):focus-visible { color: var(--brand-hover-ink); }
.foot-identity > a:has(.brand-wordmark) { display: inline-flex; text-decoration: none; --brand-letter-top: color-mix(in srgb, currentColor 96%, white); --brand-letter-base: color-mix(in srgb, currentColor 98%, var(--seal-text)); }
.foot-identity:has(.brand-wordmark) { align-items: center; }
.foot-identity .brand-wordmark { height: 33.4px; }
.foot-identity > a:has(.brand-wordmark) { gap: 8px; align-items: center; }
.foot-mark { display: block; flex: none; width: 28px; height: 28px; }
@media (prefers-reduced-motion: reduce) { .brand, .brand img, .foot-identity > a { transition: none; } }
/* Use the space left by the controls, not a device-size guess. */
@media (max-width: 760px) {
  .top-in .brand { container-type: inline-size; min-width: 44px; min-height: 44px; justify-content: flex-start; }
}
@media (max-width: 479px) {
  html.js .top-in .brand { justify-self: stretch; gap: 6px; }
  html.js .top-in .brand img { width: 36px; height: 36px; }
}
@container (max-width: 103px) { .top-in .brand-wordmark { display: none; } }
@media (max-width: 379px) {
  html.js .top-in { grid-template-columns: minmax(0, 1fr) repeat(5, 42px); }
  html.js .top-in .search-toggle, html.js .top-in .menu-btn { min-width: 42px; width: 42px; }
}
/* Theme changes crossfade two viewport snapshots, without moving the page or
   animating thousands of individual text, border and SVG nodes. */
html.theme-changing::view-transition-group(root) { animation-duration: 180ms; }
html.theme-changing::view-transition-old(root),
html.theme-changing::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: ease-out; }
html.theme-changing::view-transition { pointer-events: none; }
html.theme-changing * { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

.vendor-list { display: grid; border-top: 1px solid var(--line); }
.vendor-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 6px 18px; padding: 14px 12px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.vendor-row-main { display: contents; }
.vendor-row-name { grid-column: 1; grid-row: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.vendor-row-title { font-size: calc(16px * var(--text-scale)); font-weight: 600; line-height: 1.5; }
.vendor-row-zh { color: var(--muted); font: 400 calc(17px * var(--text-scale))/1.5 var(--f-han); }
.vendor-row p { grid-column: 1 / -1; margin: 0; font-size: calc(15px * var(--text-scale)); line-height: 1.65; color: var(--muted); max-width: 80ch; }
.vendor-row-status { grid-column: 2; grid-row: 1; padding-top: 2px; }
.vendor-row-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px 18px; color: var(--muted); font-size: calc(13px * var(--text-scale)); line-height: 1.5; }
.vendor-shipping-match { color: var(--seal-text); }
.vendor-controls { padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,210px),1fr)); gap: 14px 18px; }
.vendor-controls label { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--muted); font-size: calc(13px * var(--text-scale)); }
.vendor-controls .vendor-search { grid-column: 1 / -1; }
.vendor-controls :is(input,select) { width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--line); border-radius: var(--r); background-color: var(--bg); color: var(--ink); padding: 9px 12px; font: inherit; font-size: calc(15px * var(--text-scale)); }
.vendor-controls select { padding-right: 30px; }
.vendor-controls select:disabled { opacity: .55; }
.vendor-results { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px 6px; color: var(--muted); font-size: calc(14px * var(--text-scale)); }
/* Clear filters shares the neighbouring selects' height, radius, hairline and hover/focus; a long translation wraps inside it or drops below the count instead of widening the row. */
.vendor-results { flex-wrap: wrap; }
.vendor-results button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; flex: none; max-width: 100%; min-height: 40px; padding: 6px 14px; background: transparent; color: var(--seal-text); border: 1px solid var(--line); border-radius: 6px; font: 400 calc(14px * var(--text-scale))/1.35 var(--f-body); text-align: center; cursor: pointer; transition: border-color .16s ease, background-color .16s ease; }
.vendor-results button:hover { background: var(--wash); border-color: var(--nav-hover, var(--line-strong)); }
.vendor-results button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vendor-results button[hidden] { display: none; }
@media (max-width: 760px), (pointer: coarse) { .vendor-results button { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .vendor-results button { transition: none; } }
.vendor-filter-note { margin: 8px 0; max-width: 75ch; }
.vendor-row[hidden], .vendor-controls[hidden], .vendor-results[hidden], .vendor-shipping-match[hidden] { display: none; }
@media(max-width:600px) {
  .vendor-controls { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 12px; gap: 12px; }
  .vendor-controls .vendor-destination { grid-column: 1 / -1; }
  .vendor-controls > label:last-child { grid-column: 2; grid-row: 2; }
}
@media (max-width:420px) { .vendor-controls { grid-template-columns:minmax(0,1fr); } .vendor-controls > label:last-child { grid-column:auto; grid-row:auto; } }
@media (max-width: 560px) { .vendor-row { column-gap: 12px; padding: 14px 10px; } .vendor-row-status .pill { font-size: calc(12px * var(--text-scale)); } }

/* Processing comparison: calm hierarchy, consistent disclosures and readable sequences. */
#processing .pc-lead { max-width: 75ch; }
#processing .pc-overview-label { margin: 24px 0 8px; color: var(--muted); font-size: calc(14px * var(--text-scale)); }
#processing .pc-overview { margin: 0 0 28px; }
#processing .pc-overview > div { display: grid; grid-template-columns: minmax(11rem,1fr) minmax(0,3fr); align-items: baseline; gap: 8px 24px; padding-block: 14px; border-bottom: 1px solid var(--line); }
#processing .pc-overview dt { font-weight: 600; line-height: 1.5; }
#processing .pc-overview dd { margin: 0; min-width: 0; }
#processing .pc-sequence { display: flex; flex-wrap: wrap; gap: 6px 0; list-style: none; padding: 0; margin: 0; }
#processing .pc-sequence li { display: flex; align-items: baseline; line-height: 1.55; }
#processing .pc-sequence li:not(:last-child)::after { content: ''; width: 5px; height: 5px; border-top: 1px solid var(--muted); border-right: 1px solid var(--muted); transform: rotate(45deg); margin: 0 12px; align-self: center; opacity: .65; flex: 0 0 5px; }
#processing button { font: inherit; padding: 10px 14px; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; transition: border-color .16s, background-color .16s; }
#processing .pc-picker { margin: 16px 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
#processing summary { cursor: pointer; list-style: none; position: relative; }
#processing summary::-webkit-details-marker { display: none; }
#processing summary::after { content: ''; position: absolute; right: 18px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform .16s; }
#processing details[open] > summary::after { transform: translateY(-20%) rotate(225deg); }
#processing .pc-picker > summary { padding: 15px 44px 15px 18px; font-weight: 600; line-height: 1.5; }
#processing .pc-picker[open] > summary { border-bottom: 1px solid var(--line); }
#processing .pc-picker form { padding: 18px; }
#processing fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
#processing legend { width: 100%; padding: 0 0 12px; color: var(--muted); font-size: calc(14px * var(--text-scale)); }
#processing legend > span { display: inline-block; max-width: calc(100% - 4em); }
#processing [data-pc-count] { float: right; font-variant-numeric: tabular-nums; color: var(--ink); }
#processing [data-pc-count].is-invalid { color: var(--warn); }
#processing .pc-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
#processing .pc-options label { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; min-height: 46px; cursor: pointer; line-height: 1.5; transition: border-color .16s, background-color .16s; }
#processing .pc-options label:has(input:checked) { border-color: color-mix(in srgb,var(--seal-text) 45%,var(--line)); background: color-mix(in srgb,var(--seal-text) 3%,var(--surface)); }
#processing .pc-options input { accent-color: var(--seal-text); width: 16px; height: 16px; flex: 0 0 auto; margin: .3em 0 0; }
#processing .pc-options label:has(input:focus-visible) { outline: 2px solid var(--seal-text); outline-offset: 2px; }
#processing .pc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
#processing .pc-actions button[type="submit"] { font-weight: 600; border-color: var(--line-strong); }
#processing :is(summary,button,input,a):focus-visible { outline: 2px solid var(--seal-text); outline-offset: 3px; }
@media (hover:hover) { #processing .pc-options label:hover, #processing button:hover { border-color: var(--line-strong); background: color-mix(in srgb,var(--ink) 3%,var(--surface)); } }
@media (max-width: 700px) { #processing .pc-overview > div, #processing .pc-options { grid-template-columns: minmax(0,1fr); } #processing .pc-overview > div { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { #processing button, #processing summary::after, #processing .pc-options label { transition: none; } }

/* Narrative destinations share the measured header inset at every breakpoint. */
.context-panel[id], section[id], .gsec[id], .home > section[id], #tea-map, #wrapper-decoder, #termbase {
  scroll-margin-top: var(--category-anchor-offset, 76px);
}
/* Quiet, indivisible status tags, separate from the product title. */
.lt .listing-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.lt .listing-tags:empty { display:none; }
.lt .listing-tags :is(.pos,.sold-out) { display:inline-flex; align-items:center; margin:0; padding:2px 8px; border:1px solid var(--line-strong); border-radius:999px; background:transparent; color:var(--muted); font:500 calc(12.5px * var(--text-scale))/1.5 var(--f-body); white-space:nowrap; overflow-wrap:normal; word-break:normal; }
.lt .listing-tags :is(.pos-low,.pos-lowest) { color:var(--celadon); border-color:color-mix(in srgb,var(--celadon) 30%,var(--line)); }
.lt .listing-tags .sold-out { color:color-mix(in srgb,var(--accent) 72%,var(--muted)); border-color:color-mix(in srgb,var(--accent) 32%,var(--line)); }
.production-filters { padding:10px 0; margin-bottom:8px; }
.production-filters .filters { display:contents; }
.production-offers > .price-references { margin-top:12px; }
@media(max-width:760px){
  .production-filters.filters { display:flex; flex-direction:row; gap:12px; border:0; background:none; padding:8px 0; }
  .production-filters.filters > span, .production-filters.filters > label { flex:1 1 140px; width:auto; display:flex; flex-direction:column; align-items:stretch; gap:6px; }
  .production-filters select { width:100%; min-height:44px; }
  .production-offers .lt tr { grid-template-areas:"v v" "p p" "pr pp"; padding:18px 0; gap:12px 16px; }
  .production-offers .lt .c-pr, .production-offers .lt .c-pp { text-align:left; border-top:1px solid var(--line); padding-top:12px; }
  .production-offers .lt .c-v { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
  .production-offers .lt .c-v > a { font-weight:600; }
  .production-offers .lt .ships { margin:0; }
  .production-offers .lt .listing-title { font-size:calc(16px * var(--text-scale)); }
}
.listing-order { border-bottom:1px solid var(--line); }
html:not(.js) .listing-ssr-controls { display:none; }
.listing-order label { flex-wrap:wrap; }
.listing-order select { max-width:100%; }
.listing-order > .listing-pagination { border: 0; padding: 0; margin: 0; gap: 8px; }
[data-availability-count] { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.listing-order-note { font-size:calc(13px * var(--text-scale)); }
.lt th button { display:inline-flex; align-items:center; gap:6px; padding:4px 0; border:0; background:none; color:inherit; font:inherit; text-align:inherit; cursor:pointer; }
.sort-arrow { flex:none; width:12px; height:12px; color:currentColor; opacity:.48; transition:opacity .15s; }
.lt th[aria-sort]:not([aria-sort="none"]) .sort-arrow, [data-quick-sort][aria-pressed="true"] .sort-arrow { opacity:.95; }
.lt th button:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.listing-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 14px 0; color: var(--muted); font-size: calc(14px * var(--text-scale)); }
.listing-pagination label { display: inline-flex; align-items: center; gap: 8px; }
.listing-pagination label:has([data-page-size]) { flex-wrap:nowrap; line-height:1.4; }
.listing-pagination select[data-page-size] { flex:0 0 auto; min-width:76px; box-sizing:border-box; line-height:1.4; font-variant-numeric:tabular-nums; text-align:start; align-items:center; padding-block:8px; }
.listing-page-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-inline-start: auto; }
.listing-pagination :is(button,select) { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); min-height: 40px; padding: 6px 10px; }
/* Match the navbar's 12px vector chevron and custom picker. */
.listing-pagination select, .map-picker select, .listing-facets select, .vendor-controls select { appearance: none; padding-inline: 12px 30px; border-radius: 6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23837b72' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 12px; }
.listing-pagination select::picker-icon, .map-picker select::picker-icon, .listing-facets select::picker-icon, .vendor-controls select::picker-icon { display: none; }
@supports (appearance: base-select) { .listing-pagination select, .listing-pagination select::picker(select), .map-picker select, .map-picker select::picker(select), .listing-facets select, .listing-facets select::picker(select), .vendor-controls select, .vendor-controls select::picker(select) { appearance: base-select; } }
.listing-pagination button[aria-current] { border-color: var(--line-strong); color: var(--ink); background: var(--wash); opacity: 1; }
.listing-pagination button:disabled:not([aria-current]) { opacity: .4; }
.listing-pagination :is(button,select):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lt tbody tr[hidden] { display: none !important; }
@media(max-width:760px){.listing-page-buttons { margin-inline-start: 0; width: 100%; }.listing-pagination :is(button,select) { min-height: 44px; }}

/* Offer ledgers: product identity first, then seller and comparable prices. */
.lt th[data-sort-key="name"] { width: auto; }
.lt th[data-sort-key="vendor"] { width: 22%; }
.lt th[data-sort-key="price"], .lt th[data-sort-key="unit"] { width: 14%; }
.lt :is(th,td) { overflow-wrap: break-word; word-break: normal; }
.lt .listing-title { font-size: calc(17px * var(--text-scale)); font-weight: 600; line-height: 1.45; text-decoration-color: var(--line-strong); text-wrap: pretty; word-break: normal; line-break: strict; hyphens: manual; }
.lt .listing-title-han { font-weight: 450; }
.lt .listing-title-unit { display: inline-block; max-width: 100%; vertical-align: baseline; overflow-wrap: anywhere; }
.listing-price-primary { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 9px; }
.listing-price-main { font-size:calc(26px * var(--text-scale)); font-weight:600; line-height:1.25; font-variant-numeric:tabular-nums; }
.listing-price-pack { color:var(--muted); font-size:calc(14px * var(--text-scale)); }
.listing-price-unit { font-size:calc(16px * var(--text-scale)); margin-top:7px; }
.listing-price-checked { margin-top:5px; }
.mast-listing h1 { text-wrap:pretty; line-height:1.15; }
.lt .c-v > a { font-size: calc(15px * var(--text-scale)); font-weight: 500; }
/* Text links retain a quiet affordance; prices and status labels are not links. */
.lt :is(.c-v > a, .listing-context a) { text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: var(--line-strong); text-underline-offset: .2em; text-decoration-skip-ink: auto; }
.lt :is(.c-v > a, .listing-context a):is(:hover, :focus-visible) { color: var(--ink); text-decoration-color: currentColor; }
.lt .listing-title:is(:hover, :focus-visible) { text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: var(--line-strong); text-underline-offset: .2em; text-decoration-skip-ink: auto; }

.lt .price-value, .lt .price-pack, .lt .price-original { white-space: nowrap; overflow-wrap: normal; }
.lt .c-pr > .price-value { font-size: calc(18px * var(--text-scale)); font-weight: 500; line-height: 1.4; }
.lt .c-pp > .price-value { font-size: calc(21px * var(--text-scale)); font-weight: 600; line-height: 1.2; }
.lt .c-pp .sess, .lt .listing-context .unrecorded { display: none; }
.lt .price-original { font-size: calc(12px * var(--text-scale)); margin-top: 5px; }
.lt .price-pack { margin-top: 4px; }
.lt thead th { padding: 4px 6px; }
.lt th button { width: 100%; min-height: 44px; padding: 6px; border-radius: 4px; transition: color .15s, background-color .15s; }
.lt th.num button { justify-content: flex-end; }
.lt th[aria-sort]:not([aria-sort="none"]) button { color: var(--ink); font-weight: 600; }
@media (hover:hover) and (pointer:fine) { .lt th button:hover { color: var(--ink); background: var(--table-control-hover); } .lt th button:hover .sort-arrow, [data-quick-sort]:hover .sort-arrow { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .lt th button { transition: none; } }
.listing-context { display: flex; flex-wrap: wrap; gap: 3px 14px; }
.listing-context > div + div { margin-top: 0; }
.listing-context .listing-tea { flex-basis: 100%; }
.listing-year span { white-space: nowrap; }
.lt .offer-details { font-weight: 400; }
.listing-filters.filters { padding:8px 0 6px; margin:0; gap:8px 24px; border:0; align-items:end; }
.listing-filters + [data-listing-pages] > .listing-order, .listing-filters + .listing-order { margin-top:0; padding-top:6px; padding-bottom:10px; row-gap:6px; }
.listing-order .listing-order-note { flex-basis:100%; margin:0; line-height:1.5; }
.listing-filters.filters label { display: flex; align-items: center; gap: 8px; margin: 0; }
.listing-filters select { max-width: 100%; min-width: 0; }
.listing-filters .price-currency select { min-width: 88px; width: auto; }
@container (max-width: 620px) {
  .lt tbody { display: grid; gap: 12px; }
  .lt tr, .production-offers .lt tr { grid-template-areas: "p p" "pr pp" "v v"; padding: 16px; gap: 10px 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
  .lt tr:last-child { border-bottom: 1px solid var(--line); }
  .lt tr:not(:has(.c-v)) { grid-template-areas: "p p" "pr pp"; }
  .lt .c-p { font-weight: 400; }
  .lt .listing-title { font-size: calc(17px * var(--text-scale)); line-height: 1.4; }
  .lt .c-v { font-size: calc(14px * var(--text-scale)); gap: 4px 10px; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; }
  .lt .c-v > a { padding-block: 4px; }
  .lt .c-v .ships > .shiptag:not(.ww) { display: none; }
  .lt .c-pr, .lt .c-pp { padding-top: 10px; font-size: calc(15px * var(--text-scale)); }
  .lt .c-pr > .price-value { font-size: calc(19px * var(--text-scale)); line-height: 1.3; font-weight: 500; }
  .lt .c-pp > .price-value { font-size: calc(22px * var(--text-scale)); line-height: 1.12; font-weight: 600; }
  .lt .c-pr .price-pack { margin-top: 4px; }
  .lt .c-pp :is(.price-original,.sess), .lt .listing-context .unrecorded { display: none; }
  .lt .listing-context { margin-top: 8px; gap: 4px 14px; }
}
/* Listing hierarchy: one reading size, compact context, a clear unit-price anchor. */
.lt td { vertical-align: top; }
.lt .listing-context { gap: 2px 12px; font-size: calc(14px * var(--text-scale)); }
.lt .listing-context .listing-tea { flex-basis: auto; }
/* Tea, stated year and origin share one text baseline (the link's 3px tap padding no longer lifts its neighbours); origin always takes its own row. */
.lt .listing-context { align-items: baseline; }
.lt .listing-context a { margin-block: -3px; }
@container (min-width: 621px) { .lt .listing-context .listing-origin { flex-basis: 100%; } }
.lt .offer-details { margin-top: 6px; font-size: calc(14px * var(--text-scale)); }
.lt .c-pr > .price-value { font-size: calc(16px * var(--text-scale)); line-height: 1.45; font-weight: 400; }
.lt .c-pp > .price-value { font-size: calc(20px * var(--text-scale)); line-height: 1.3; }
.lt :is(.price-pack,.price-original,.price-note) { font-size: calc(14px * var(--text-scale)); line-height: 1.45; }
.lt .price-note { font-size: calc(13px * var(--text-scale)); margin-top: 4px; }
.lt .price-note-visible { margin: 8px 0; max-width: 52ch; }
.lt .price-note-visible > p { margin: 0; }
@container (max-width: 620px) {
  .lt tr, .production-offers .lt tr { grid-template-areas: "p p" "pp pr" "v v"; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px 16px; }
  .lt tr:not(:has(.c-v)) { grid-template-areas: "p p" "pp pr"; }
  .lt :is(.c-pr,.c-pp) { border-top: 1px solid var(--line); padding-top: 10px; align-self: stretch; }
  .lt .c-pp { text-align: start; }
  .lt .c-pr { text-align: end; }
  .lt :is(.c-pr,.c-pp)::before { font-size: calc(14px * var(--text-scale)); line-height: 1.4; }
  .lt .c-v { border-top: 0; margin-top: 0; padding-top: 0; font-size: calc(14px * var(--text-scale)); }
  .lt .c-v > a { font-size: inherit; }
  .lt .listing-context { margin-top: 6px; }
  .lt .price-pack { display: inline; white-space: normal; }
  .lt .price-note { max-width: none; }
}
/* Listing rows (0.3.21): compare details read as one label/value list, with the long qualification as a quiet note under the data. */
.lt .offer-details-visible { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 10px; }
.lt .offer-details-visible .offer-details-heading { order: 0; font-size: calc(14px * var(--text-scale)); font-weight: 600; color: var(--ink); }
.lt .offer-details-visible dl { order: 1; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0; }
.lt .offer-details-visible dl > div { grid-template-columns: minmax(7.5em, .6fr) minmax(0, 1.4fr); gap: 4px 14px; }
.lt .offer-details-visible dt { color: var(--muted); }
.lt .offer-details-visible > p { order: 2; margin: 2px 0 0; max-width: 58ch; text-wrap: pretty; font-size: calc(13px * var(--text-scale)); line-height: 1.5; color: var(--muted); }
@container (max-width: 620px) { .lt .offer-details-visible dl > div { grid-template-columns: minmax(6.5em, .7fr) minmax(0, 1.3fr); } }
@media (max-width: 400px) { .lt .offer-details-visible dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
/* Listing rows (0.3.23): essentials first. Title, one meta line, vendor, price and per-100 g stay visible; claims, packaging and price notes sit in one disclosure. */
.lt .listing-context { margin-top: 4px; gap: 2px 14px; color: var(--muted); }
.lt .listing-context :is(.listing-tea,.listing-year,.listing-origin) { min-width: 0; overflow-wrap: anywhere; }
@container (min-width: 621px) { .lt .listing-context .listing-origin { flex-basis: auto; } }
.lt .row-more { margin-top: 6px; font-size: calc(14px * var(--text-scale)); }
.lt .row-more > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding-block: 2px; color: var(--muted); cursor: pointer; list-style: none; }
.lt .row-more > summary::-webkit-details-marker { display: none; }
.lt .row-more > summary::after { content: "›"; display: inline-block; line-height: 1; transition: transform .15s ease; }
.lt .row-more[open] > summary::after { transform: rotate(90deg); }
.lt .row-more > summary:is(:hover, :focus-visible) { color: var(--ink); }
.lt .row-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.lt .row-more .offer-details-visible { margin-top: 4px; }
.lt .row-more .price-note-visible { margin: 10px 0 0; }
.lt .c-p > [data-listing-sort-date] { margin-top: 4px; font-size: calc(13px * var(--text-scale)); }
.lt .c-pr > .price-value { color: var(--muted); }
.lt .c-pp > .price-value { font-size: calc(22px * var(--text-scale)); }
@media (prefers-reduced-motion: reduce) { .lt .row-more > summary::after { transition: none; } }
/* Original-currency per-100 g line carries its unit and may wrap before it in narrow columns. */
.lt .price-original { white-space: normal; font-size: calc(13px * var(--text-scale)); }
@container (min-width: 621px) { .lt th[data-sort-key="vendor"] { width: 20%; } .lt th[data-sort-key="price"], .lt th[data-sort-key="unit"] { width: 15%; } }
/* Price references: one collapsed step below the pagination, with a clear disclosure marker. */
.price-references { margin-top: 28px; }
.price-references > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding-block: 6px; font-size: calc(16px * var(--text-scale)); list-style: none; }
.price-references > summary::-webkit-details-marker { display: none; }
.price-references > summary::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; box-sizing: border-box; border-inline-end: 1.5px solid var(--muted); border-top: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform .16s ease; }
.price-references[open] > summary::before { transform: translateY(-1px) rotate(135deg); }
@media (prefers-reduced-motion: reduce) { .price-references > summary::before { transition: none; } }
.price-references > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.price-references > summary .count { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.tbl:has(.lt) { border-block: 0; background: none; }
@container (min-width: 621px) { .lt { border-block: 1px solid var(--line-strong); background: var(--surface); } .lt td { padding-block: 20px; } }
@container (max-width: 360px) { .lt tr { padding: 14px; gap: 10px 12px; } }
@media(max-width: 760px) {
  .listing-order:not(:has([data-listing-availability])) > label:has([data-listing-sort]) { display: flex; flex-direction: column; align-items: stretch; gap: 5px; width: 100%; min-width: 0; }
  .listing-order:not(:has([data-listing-availability])) [data-listing-sort] { width: 100%; min-width: 0; min-height: 44px; }
  .listing-order:has([data-listing-availability]) { display: grid; grid-template-columns: minmax(100px, .85fr) minmax(0, 1.5fr); gap: 8px 12px; padding-top: 4px; }
  .listing-order:has([data-listing-availability]) label { display: flex; flex-direction: column; align-items: stretch; gap: 5px; width: 100%; min-width: 0; }
  .listing-order:has([data-listing-availability]) select { width: 100%; min-width: 0; }
  .listing-order:has([data-listing-availability]) .listing-order-note { grid-column: 1 / -1; margin: 0; }
  .listing-filters.filters { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(90px, 1fr); gap: 12px; }
  .listing-filters.filters > span, .listing-filters.filters > label { width: auto; min-width: 0; }
  .listing-filters.filters label { flex-direction: column; align-items: stretch; gap: 5px; width: 100%; }
  .listing-filters.filters select, .listing-filters .price-currency select { width: 100%; min-height: 44px; }
}
/* Naming distinctions read as independent, sourced notes. */
.ambiguities-section { container-type: inline-size; }
.amb { gap: 0 28px; }
.amb article { grid-template-columns: minmax(0,1fr); align-content: start; gap: 8px; padding-block: 18px; }
.amb h3 { max-width: 72ch; font-size: calc(16px * var(--text-scale)); line-height: 1.5; overflow-wrap: break-word; }
.amb-body { max-width: 76ch; }
.amb .src { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: calc(13px * var(--text-scale)); }
.amb .src a { max-width: 100%; line-height: 1.5; text-decoration-color: var(--line-strong); }
@container (min-width: 720px) {
  .amb { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .amb article, .amb article:first-child { padding-block: 16px; border-top: 1px solid var(--line); }
  .amb article:nth-child(-n+2) { border-top: 0; padding-top: 2px; }
  .amb article:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.producer-brands { list-style: none; padding: 0; margin: 0; display: grid; }
.producer-brands li { padding-block: 10px; }
.producer-brands li:first-child { padding-top: 0; }
.producer-brands li:last-child { padding-bottom: 0; }
.producer-brands li + li { border-top: 1px solid var(--line); }
.brand-label { display: block; font-weight: 500; line-height: 1.5; }
.brand-parenthetical { font-weight: 400; color: var(--muted); }
.brand-note { display: block; margin-top: 3px; font-size: calc(14.5px * var(--text-scale)); color: var(--muted); line-height: 1.65; }
.seal-mark { position: relative; }
/* Anchor outlined ink to the frame, independently of font baselines and the
   surrounding flex/grid line. The SVG remains square at every text-size setting. */
.seal-mark > svg { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); display: block; width: 1em; height: 1em; margin: 0; padding: 0; overflow: visible; fill: currentColor; stroke: none; }
.seal-mark.xs { width: calc(18px * var(--text-scale)); height: calc(18px * var(--text-scale)); }
.seal-mark.sm { width: calc(22px * var(--text-scale)); height: calc(22px * var(--text-scale)); }
.seal-mark.md { width: calc(30px * var(--text-scale)); height: calc(30px * var(--text-scale)); }
.rail a .seal-mark { width: calc(26px * var(--text-scale)); height: calc(26px * var(--text-scale)); font-size: calc(20px * var(--text-scale)); }
.map-label { paint-order: stroke fill; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.region-map-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.region-map-card { margin: 0; min-width: 0; display: grid; grid-template-rows: auto 1fr auto; }
.region-map-card figcaption { display: grid; align-content: start; gap: 2px; min-height: 4.2em; padding: 4px 4px 8px; font-size: calc(14px * var(--text-scale)); line-height: 1.45; }
.region-map-card figcaption strong { font-weight: 600; }
.region-map-card figcaption span { color: var(--muted); }
.map-canvas { display: grid; align-items: center; min-width: 0; aspect-ratio: 1.35; }
.map-canvas .chart { width: 100%; height: 100%; max-height: 340px; object-fit: contain; }
.region-locator .locator-svg { display: block; overflow: hidden; background: var(--map-water); }
.locator-scale { fill: var(--muted); font: 12px var(--f-body); paint-order: stroke fill; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.locator-land { fill: color-mix(in srgb, var(--celadon) 16%, var(--surface)); stroke: color-mix(in srgb, var(--ink) 30%, var(--line)); stroke-width: .9; stroke-linejoin: round; }
.locator-point { fill: var(--seal-text); stroke: var(--surface); stroke-width: 2; }
.locator-halo { fill: var(--seal-text); fill-opacity: .13; }
.region-locator .grat { stroke-opacity: .4; }
.locator-caption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding: 6px 4px 2px; color: var(--muted); font-size: calc(12.5px * var(--text-scale)); }
.locator-caption a { color: inherit; text-decoration-color: var(--line-strong); }
.region-nearby { min-width: 0; }
.region-nearby .dual { border: 0; padding: 0; background: none; }
.region-nearby .map-canvas .dual { display: grid; align-items: center; height: 100%; }
.region-nearby .map-canvas .dv-wide, .region-nearby .map-canvas .dv-compact { height: 100%; }
.elevation-chart { container-type: inline-size; }
.elevation-list { list-style: none; margin: 0; padding: 0; }
.elevation-list a { display: grid; grid-template-columns: minmax(120px, 30%) minmax(0, 1fr) 9.5em; align-items: center; gap: 16px; min-height: 44px; padding: 7px 5px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: calc(14.5px * var(--text-scale)); line-height: 1.45; }
.elevation-name { overflow-wrap: break-word; }
.elevation-value { color: var(--muted); text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: calc(13.5px * var(--text-scale)); }
.elevation-track { position: relative; height: 20px; border-inline: 1px solid var(--line); background: linear-gradient(to right, transparent calc(50% - .5px), var(--line) 50%, transparent calc(50% + .5px)); }
.elevation-track i { position: absolute; top: 5px; height: 10px; min-width: 3px; border-radius: 2px; background: color-mix(in srgb, var(--celadon) 65%, var(--surface)); }
.elevation-list a[aria-current] { color: var(--seal-text); font-weight: 600; }
.elevation-list a[aria-current] .elevation-track i { background: var(--seal-text); }
.elevation-list a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .elevation-list a:hover { background: var(--wash); } }
.elevation-axis { display: grid; grid-template-columns: minmax(120px, 30%) minmax(0, 1fr) 9.5em; gap: 16px; padding: 3px 5px 9px; margin: 0; font-size: calc(14.5px * var(--text-scale)); color: var(--muted); }
.elevation-axis span { grid-column: 2; grid-row: 1; font-size: calc(12px * var(--text-scale)); white-space: nowrap; }
.elevation-axis span:last-child { justify-self: end; }
.elevation-more > summary { padding: 12px 5px 6px; min-height: 44px; cursor: pointer; color: var(--muted); font-size: calc(14px * var(--text-scale)); }
@container (max-width: 500px) {
  .elevation-list a { grid-template-columns: minmax(0,1fr) 9.5em; gap: 5px 12px; padding-block: 10px; }
  .elevation-name { grid-column: 1 / -1; font-weight: 500; }
  .elevation-axis { grid-template-columns: minmax(0,1fr) 9.5em; gap: 12px; padding-bottom: 3px; }
  .elevation-axis span { grid-column: 1; }
}
@media(max-width: 800px) { .region-map-pair { grid-template-columns: minmax(0,1fr); } }
.terrain-map-scope [hidden] { display: none !important; }
.terrain-map-scope { container-type: inline-size; }
.terrain-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 25%); gap: 16px; align-items: start; }
.terrain-no-key { display: block; }
.terrain-art { min-width: 0; }
.terrain-art .dv-compact { display: none; }
:root { --map-water: #e3ecee; }
:root[data-theme="dark"] { --map-water: #1b2a2e; }
@media(prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --map-water: #1b2a2e; } }
.viz .terrain-svg { display: block; contain: paint; width: 100%; height: auto; overflow: hidden; border-radius: 5px; background: var(--map-water); isolation: isolate; }
.terrain-elevation { display: block; color: var(--muted); font-size: .85em; line-height: 1.5; font-variant-numeric: tabular-nums; }
.terrain-river { fill: none; stroke: #7299a6; stroke-width: .85; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .7; }
.terrain-context { pointer-events: none; font-weight: 500; stroke-width: 4px; stroke-opacity: .92; }
.terrain-river-label { fill: #2c5664; font-style: italic; }
.terrain-range-label { fill: #46423b; letter-spacing: .035em; }
:root[data-theme="dark"] .terrain-river { stroke: #6d939e; opacity: .65; }
:root[data-theme="dark"] .terrain-river-label { fill: #b1ced6; }
:root[data-theme="dark"] .terrain-range-label { fill: #cdc6ba; }
@media(prefers-color-scheme: dark) { :root:not([data-theme="light"]) .terrain-river { stroke: #6d939e; opacity: .65; } :root:not([data-theme="light"]) .terrain-river-label { fill: #b1ced6; } :root:not([data-theme="light"]) .terrain-range-label { fill: #cdc6ba; } }
.region-map-card { padding: 14px; gap: 10px; align-content: start; }
.region-map-card figcaption { min-height: 0; padding: 0 2px 4px; gap: 4px; }
.region-map-card .map-canvas { aspect-ratio: auto; display: block; }
.region-map-card .map-canvas .chart { height: auto; max-height: none; }
.region-map-card .map-extent { padding-top: 10px; border-top: 1px solid var(--line); }
@media(max-width: 760px) { .region-map-card { padding: 10px; gap: 8px; } }
.terrain-land { fill: color-mix(in srgb, var(--celadon) 7%, var(--surface)); }
.terrain-coast { fill: none; stroke: color-mix(in srgb, var(--muted) 40%, transparent); stroke-width: .65; vector-effect: non-scaling-stroke; }
.terrain-relief { opacity: var(--terrain-opacity, .68); filter: brightness(1.02) contrast(1.02); mix-blend-mode: multiply; }
:root[data-theme="dark"] .terrain-relief { opacity: var(--terrain-dark-opacity, .40); filter: brightness(1.02) contrast(1.02) invert(1); mix-blend-mode: screen; }
@media(prefers-color-scheme: dark) { :root:not([data-theme="light"]) .terrain-relief { opacity: var(--terrain-dark-opacity, .40); filter: brightness(1.02) contrast(1.02) invert(1); mix-blend-mode: screen; } }
.terrain-explorer [data-map-panel="overview"] { --terrain-opacity: .72; --terrain-dark-opacity: .44; }
.terrain-label { fill: var(--ink); font-family: var(--f-body); font-weight: 500; stroke-width: 4px; stroke-opacity: .92; }
.terrain-label .map-no { fill-opacity: .72; }
.terrain-focus { fill: var(--seal-text); font-weight: 600; }
.terrain-hit { fill: transparent; }
.terrain-svg .pt { fill-opacity: .8; }
.terrain-svg :is(.pt,.pt-me) { stroke: var(--surface); stroke-width: 1.25; paint-order: stroke fill; }
.terrain-svg .sbar { stroke-width: 1; stroke-linecap: butt; }
.terrain-scale { fill: var(--ink); }
.terrain-scale text { font-weight: 500; font-variant-numeric: tabular-nums; stroke-width: 4px; stroke-opacity: .92; }
.terrain-scale .sbar { stroke-width: 1.5; }
.terrain-key { list-style: none; margin: 0; padding: 0; }
.terrain-key a { display: flex; align-items: baseline; gap: 8px; padding: 7px 4px; min-height: 36px; color: var(--ink); text-decoration: none; border-radius: 4px; font-size: calc(14px * var(--text-scale)); line-height: 1.4; }
.terrain-key li, .terrain-key a > span:last-child { min-width: 0; }
.terrain-key a > span:last-child { overflow-wrap: break-word; hyphens: manual; text-wrap: pretty; }
.terrain-explorer .terrain-layout { grid-template-columns: minmax(0,1fr); }
.terrain-explorer .terrain-key { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 16px; }
.map-number { font: 400 11px var(--f-mono); min-width: 1.8em; color: var(--muted); }
.terrain-key [aria-current="page"] { color: var(--seal-text); font-weight: 600; }
.terrain-map-scope .map-highlight .terrain-label, .terrain-map-scope .map-highlight .pt { fill: var(--seal-text); }
.terrain-key a:is(.map-highlight,:focus-visible) { background: var(--wash); color: var(--accent); }
.map-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--muted); font-size: calc(14px * var(--text-scale)); margin: 0 0 16px; }
.map-picker select { border: 1px solid var(--line); background-color: var(--surface); padding: 8px 30px 8px 10px; border-radius: 6px; width: min(100%, 32em); min-width: 0; max-width: 100%; min-height: 44px; font: inherit; color: var(--ink); }
.map-extent { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding-top: 8px; color: var(--muted); font-size: calc(12px * var(--text-scale)); line-height: 1.5; }
.map-footer { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: calc(12px * var(--text-scale)); line-height: 1.6; }
.map-footer a { color: inherit; text-decoration-color: var(--line); }
.map-count-compact { display: none; }
.map-footer-meta { display: flex; flex-wrap: wrap; gap: 0 .4em; margin-inline-start: auto; }
.terrain-attribution { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: 9px; color: var(--muted); font-size: calc(12px * var(--text-scale)); line-height: 1.6; }
.terrain-attribution a { max-width: 100%; }
.terrain-attribution a { color: inherit; text-decoration-color: var(--line); }
.region-map-card .map-canvas { display: block; aspect-ratio: auto; align-self: center; }
.region-map-card .map-canvas .chart { height: auto; max-height: none; }
.region-map-card .locator-caption { min-height: 44px; align-items: center; }
.map-switch { justify-content: start; gap: 6px; }
.map-switch button { font: 500 calc(13px * var(--text-scale))/1.35 var(--f-body); min-height: 34px; padding: 5px 10px; border: 1px solid transparent; border-radius: 5px; color: var(--muted); background: transparent; cursor: pointer; }
.map-switch button[aria-pressed="true"] { color: var(--ink); border-color: var(--line); background: var(--wash); }
.map-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@container (max-width: 580px) {
  .terrain-art .dv-wide { display: none; }
  .terrain-art .dv-compact { display: block; }
  .map-count-wide { display: none; }
  .map-count-compact { display: inline; }
  .terrain-layout { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .terrain-key { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 12px; }
  .terrain-key a { min-height: 44px; }
  .terrain-explorer .terrain-key { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 12px; }
  .map-footer-meta { margin-inline-start: 0; }
}
@container (max-width: 340px) {
  .terrain-explorer .terrain-key { grid-template-columns: minmax(0,1fr); gap: 0; }
  .map-footer { gap: 5px; }
}


/* Full-catalogue facets share the site's native select and focus treatments. */
.listing-facets { border: 1px solid var(--line); border-radius: 5px; padding: 16px; margin-bottom: 16px; }
.listing-facet-primary, .listing-facet-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.listing-facet-search { margin-bottom: 12px; }
.listing-facet-toggle { display: none; }
.listing-facets label { display: flex; flex-direction: column; gap: 5px; min-width: 0; color: var(--muted); font-size: calc(13px * var(--text-scale)); }
.listing-facets :is(input,select) { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; background-color: var(--bg); color: var(--ink); font: inherit; font-size: calc(14px * var(--text-scale)); }
.listing-facets select { padding-right: 32px; }
.listing-facets :is(input,select,button,summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.listing-facet-more { margin-top: 12px; border-top: 1px solid var(--line); }
/* The disclosure uses the same 12px chevron as the selects above (drawn at the same inset), muted, instead of the browser's solid triangle. */
.listing-facet-more summary { position: relative; list-style: none; cursor: pointer; padding: 12px 34px 12px 0; font-size: calc(14px * var(--text-scale)); }
.listing-facet-more summary::-webkit-details-marker { display: none; }
.listing-facet-more summary span { color: var(--muted); margin-left: 4px; }
.listing-facet-more summary::after { content: ""; position: absolute; inset-inline-end: 13px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23837b72' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.listing-facet-more[open] summary::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) { .listing-facet-more summary::after { transition: transform .15s ease; } }
.listing-facet-price { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-column: span 2; gap: 10px; border: 0; margin: 0; padding: 0; min-width: 0; }
.listing-facet-price legend { color: var(--muted); font-size: calc(13px * var(--text-scale)); margin-bottom: 5px; }
.listing-facet-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: calc(13px * var(--text-scale)); color: var(--muted); }
.listing-facet-status button, .listing-facet-chips button { border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 4px; font: inherit; cursor: pointer; padding: 8px 10px; min-height: 36px; }
.listing-facet-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.listing-facet-chips:not(:empty) { padding-top: 12px; }
.listing-facet-chips button { font-size: calc(13px * var(--text-scale)); text-align: left; overflow-wrap: anywhere; }
.listing-facet-chips button span { margin-left: 5px; color: var(--accent); }
.listing-facets button:hover { background: var(--wash); border-color: var(--line-strong); }
@media(max-width:760px) {
 .listing-facets { padding: 12px; }
 .listing-facet-toggle { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 44px; padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--ink); font: inherit; font-size: calc(14px * var(--text-scale)); text-align: left; cursor: pointer; }
 .listing-facet-toggle::after { content: '+'; margin-left: auto; font-size: 20px; line-height: 1; }
 .listing-facet-toggle[aria-expanded="true"]::after { content: '−'; }
 .listing-facet-toggle span { color: var(--muted); }
 .listing-facet-toggle[aria-expanded="false"] + .listing-facet-panel { display: none; }
 .listing-facet-primary, .listing-facet-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
 .listing-facet-primary > label:last-child { grid-column: 1 / -1; }
 .listing-facet-price { grid-column: 1 / -1; }
 .listing-facet-status button, .listing-facet-chips button { min-height: 44px; }
}
@media(max-width:380px) { .listing-facet-primary, .listing-facet-grid { grid-template-columns:minmax(0,1fr); } .listing-facet-price { grid-column:1; } }

/* Terms: seven wide-screen shortcuts, four at intermediate widths,
   five in the compact two-column phone layout. No-JS retains all sections. */
@media (min-width: 1280px) {
  .js .otp-compact:has(a[href^="#domain-"]):not(.otp-expanded) li:nth-child(-n+7) { display: flex; }
}
@media (max-width: 760px) {
  .js .otp-compact:has(a[href^="#domain-"]):not(.otp-expanded) li:nth-child(-n+5) { display: flex; }
}


/* Mobile offer comparison: direct sorting and stable card landmarks. */
.listing-quick-sort{display:none}
@media(max-width:760px){
 .listing-order .listing-quick-sort{display:none}
 .listing-quick-sort button{min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:5px;background:transparent;box-shadow:none;font:500 15px var(--f-body);color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:6px}
 .listing-quick-sort button[aria-pressed=true]{background:var(--wash);font-weight:600;box-shadow:none}
 [data-listing-directory]>[data-listing-pages]>.listing-order{position:sticky;top:calc(var(--category-anchor-offset,76px) - 12px);z-index:4;background:var(--bg);padding:6px 0;margin-top:0;gap:4px}
 body:has(.top-in.search-open) [data-listing-directory]>[data-listing-pages]>.listing-order{position:static}
 .listing-order:not(:has([data-listing-availability]))>label:has([data-listing-sort]){flex-direction:row;align-items:center;font-size:13px;gap:10px}
 .listing-order:not(:has([data-listing-availability])) [data-listing-sort]{flex:1;width:auto;min-height:44px}
 .listing-order-note{font-size:12px;line-height:1.35}
 #view>.stack:has(>[data-listing-directory]){gap:16px}
 #view>.stack:has(>[data-listing-directory])>.stack-sm{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:baseline}
 #view>.stack:has(>[data-listing-directory])>.stack-sm h1{grid-column:1;grid-row:1;margin:0;font-size:28px}
 #view>.stack:has(>[data-listing-directory])>.stack-sm .eyebrow{grid-column:2;grid-row:1}
 #view>.stack:has(>[data-listing-directory])>.stack-sm .catalogue-lead{grid-column:1/-1;margin:0;font-size:14px;line-height:1.45}
 [data-listing-directory]>.listing-facets{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;border:0;padding:0;margin-bottom:8px}
 [data-listing-directory] .listing-facet-search{margin:0}
 [data-listing-directory] .listing-facet-toggle{width:auto;margin:0;gap:8px}
 [data-listing-directory] :is(.listing-facet-panel,.listing-facet-status,.listing-facet-chips){grid-column:1/-1}
 [data-listing-directory] .listing-facet-chips:empty{display:none}
 [data-listing-directory] .listing-facet-status{font-size:12px;line-height:1.4}
 [data-listing-directory]>.listing-filters{padding:4px 0 8px;margin:0;gap:8px 12px}
 [data-listing-directory]>.listing-filters label{flex:1;min-width:0}
 [data-listing-directory]>.listing-filters select{width:100%;min-width:0}
 [data-listing-directory]>[data-listing-pages]>.listing-pagination:not(.listing-order){padding:8px 0;gap:6px 12px;justify-content:space-between}
 [data-listing-directory] .listing-page-buttons{gap:4px}
}
@container(max-width:620px){
 .lt tbody{gap:16px}
 .lt tr,.production-offers .lt tr{grid-template-areas:"p p" "v v" "pp pr";padding:16px;gap:8px 16px;border-color:var(--line-strong);border-radius:8px}
 .lt tr:not(:has(.c-v)){grid-template-areas:"p p" "pp pr"}
 .lt .listing-title{font-size:18px;line-height:1.35;text-decoration:none;color:var(--ink)}
 .lt .listing-context{gap:4px 10px;margin-top:8px;line-height:1.4}
 .lt .listing-context .listing-tea{flex-basis:100%;font-weight:600}
 .lt .listing-year span{font-weight:600;color:var(--ink)}
 .lt .listing-origin{font-size:13px}
 .lt .c-v{padding:0;margin:0;gap:4px 10px;line-height:1.35}
 .lt .c-v>a{font-size:14px;padding-block:3px}
 .lt :is(.c-pr,.c-pp){padding-top:9px;margin-top:3px}
 .lt .c-pp>.price-value,.lt .c-pr>.price-value{font-size:20px;font-weight:600;line-height:1.25}
 .lt .price-pack{display:block;font-size:13px;margin-top:3px}
 .lt :is(.c-pr,.c-pp)::before{font-size:12px;margin-bottom:4px}
}
/* END MOBILE OFFER COMPARISON */

/* Align the quiet fret with the footer's content column, preserving its proportions. */
.site-foot { --fret-center: 50%; --fret-width: clamp(128px, 16vw, 175px); }
.site-foot::before { left: var(--fret-center); top: 0; transform: translate(-50%, -50%); width: calc(var(--fret-width) + 32px); height: 18px; }
.foot-fret { left: var(--fret-center); top: 0; transform: translate(-50%, -50%); width: var(--fret-width); height: auto; }
@media (min-width: 761px) { .site-foot { --fret-center: calc(50% + 115px); } }

/* Footer, final pass.
   Wide: identity and links share one row, the legal lines sit under a hairline; links get a quiet hover wash.
   Narrow (<=760px): everything stacks and aligns to the start edge; the links are one wrapping row of underlined
   44px-tall targets, and the legal lines are small and tight. Touch screens keep 44px targets at every width. */
.foot-in { align-items: center; gap: 8px 12px; padding-top: 22px; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.foot-links { gap: 0 4px; }
.foot-links a { min-height: 36px; padding: 0 12px; border-radius: 6px; transition: color .16s ease, background-color .16s ease; }
.foot-links a:hover { color: var(--ink); background: var(--wash); text-decoration: none; }
.foot-links a:focus-visible { outline-offset: -2px; color: var(--ink); }
.back-top { width: 36px; height: 36px; }
.back-top:hover { color: var(--ink); border-color: var(--line-strong); }
.foot-meta { margin-top: 0; padding-top: 10px; color: var(--muted); }
@media (pointer: coarse) { .foot-links a { min-height: 44px; } .back-top { width: 44px; height: 44px; } }
@media (min-width: 761px) and (max-width: 1050px) {
  .foot-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto) auto; grid-template-areas: "brand links top" "meta meta meta"; }
  .foot-links { margin-inline-start: 0; gap: 0; }
  .foot-links a { padding: 0 8px; }
}
@media (max-width: 760px) {
  /* Phones: two quiet parts. Plain underlined links on one line (wrapping, never truncating), then one small
     paragraph holding © owner, version, rights and the licence note. Back-to-top sits beside the links. The logo row is
     left out (the header carries the brand) and the desktop licence line is replaced by its copy inside .foot-own. */
  .foot-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "links top" "brand brand"; gap: 8px 12px; align-items: center; padding-top: 12px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .foot-identity, .foot-meta { display: none; }
  .foot-src-m { display: inline; }
  .foot-links { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; align-self: stretch; gap: 0 20px; margin: 0; }
  .foot-links a { display: inline-flex; align-items: center; min-height: 48px; padding: 0; border-radius: 0; color: var(--ink); font-size: calc(15px * var(--text-scale)); line-height: 1.35; text-decoration: underline 1px var(--line-strong); text-underline-offset: 5px; }
  .foot-links a:hover, .foot-links a:focus-visible, .foot-links a:active { background: transparent; color: var(--accent); text-decoration-color: currentColor; }
  .foot-links a:focus-visible { outline-offset: 2px; }
  .foot-brand { display: block; align-self: start; padding-top: 2px; }
  .foot-brand .foot-own { font-size: calc(12px * var(--text-scale)); line-height: 1.55; text-wrap: pretty; hyphens: manual; -webkit-hyphens: manual; }
  .back-top { width: 48px; height: 48px; min-width: 48px; min-height: 48px; align-self: start; justify-self: end; border-color: var(--line); background: var(--surface); touch-action: manipulation; }
}


/* Dropdowns: every content-area select shares the header menus' look. Closed field = 6px radius, hairline border, quiet chevron;
   popup = raised panel with roomy rows and a check mark on the current choice. Without customizable selects the browser's own
   popup is used (the field still matches), which is also what touch browsers without support fall back to. */
:is(.listing-pagination, .listing-facets, .listing-filters, .map-picker, .vendor-controls, .mkt, .price-currency, .ct-form) select {
  appearance: none; -webkit-appearance: none; box-sizing: border-box; min-height: 40px; max-width: 100%; padding-inline: 12px 34px;
  color: var(--ink); background: var(--bg) var(--chev) no-repeat right 13px center / 10px 6px; border: 1px solid var(--line); border-radius: 6px;
  font: 400 calc(15px * var(--text-scale))/1.35 var(--f-body); text-overflow: ellipsis; cursor: pointer; align-items: center;
  transition: border-color .16s ease, background-color .16s ease; }
:is(.listing-pagination, .listing-facets, .listing-filters, .map-picker, .vendor-controls, .mkt, .price-currency, .ct-form) select:hover { border-color: var(--nav-hover, var(--line-strong)); }
:is(.listing-pagination, .listing-facets, .listing-filters, .map-picker, .vendor-controls, .mkt, .price-currency, .ct-form) select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:is(.listing-pagination, .listing-facets, .listing-filters, .map-picker, .vendor-controls, .mkt, .price-currency, .ct-form) select:is(:open, [aria-expanded="true"]) { border-color: var(--line-strong); background-color: var(--wash); }
:is(.listing-pagination, .listing-facets, .listing-filters, .map-picker, .vendor-controls, .mkt, .price-currency, .ct-form) select:disabled { opacity: .55; cursor: not-allowed; }
:is(.listing-pagination, .listing-facets, .listing-filters, .map-picker, .vendor-controls, .mkt, .price-currency, .ct-form) select::picker-icon { display: none; }
:is(.listing-pagination, .listing-facets, .listing-filters, .map-picker, .vendor-controls, .mkt, .price-currency, .ct-form) option { color: var(--ink); background: var(--bg); font: inherit; }
@supports (appearance: base-select) {
  :is(.listing-pagination, .listing-facets, .listing-filters, .map-picker, .vendor-controls, .mkt, .price-currency, .ct-form) select,
  :is(.listing-pagination, .listing-facets, .listing-filters, .map-picker, .vendor-controls, .mkt, .price-currency, .ct-form) select::picker(select) { appearance: base-select; }
  :is(.listing-pagination, .listing-facets, .listing-filters, .map-picker, .vendor-controls, .mkt, .price-currency, .ct-form) select::picker(select) {
    box-sizing: border-box; min-width: max(180px, anchor-size(width)); max-width: calc(100vw - 24px); max-height: min(22rem, 70vh); margin-block: 6px; padding: 6px;
    border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg); color: var(--ink); box-shadow: 0 3px 10px -2px rgb(0 0 0 / .1);
    font-family: var(--f-body); font-size: calc(15px * var(--text-scale)); }
  :is(.listing-pagination, .listing-facets, .listing-filters, .map-picker, .vendor-controls, .mkt, .price-currency, .ct-form) option {
    position: relative; display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 38px 8px 12px; border-radius: 5px; line-height: 1.4; cursor: pointer; }
  :is(.listing-pagination, .listing-facets, .listing-filters, .map-picker, .vendor-controls, .mkt, .price-currency, .ct-form) option:checked { color: var(--accent); background: var(--accent-soft); }
  :is(.listing-pagination, .listing-facets, .listing-filters, .map-picker, .vendor-controls, .mkt, .price-currency, .ct-form) option:is(:hover, :focus) { background: var(--wash); outline: none; }
  :is(.listing-pagination, .listing-facets, .listing-filters, .map-picker, .vendor-controls, .mkt, .price-currency, .ct-form) option:checked:is(:hover, :focus) { background: var(--accent-soft); }
  :is(.listing-pagination, .listing-facets, .listing-filters, .map-picker, .vendor-controls, .mkt, .price-currency, .ct-form) option::checkmark { content: ""; position: absolute; inset-inline-end: 12px; width: 16px; height: 16px; background: currentColor; color: var(--muted); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4 10 4 4 8-8' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
}
@supports (appearance: base-select) {
  :is(.listing-pagination, .listing-facets, .listing-filters, .map-picker, .vendor-controls, .mkt, .price-currency, .ct-form) optgroup { margin-top: 4px; padding: 8px 12px 2px; color: var(--muted); font-size: calc(12.5px * var(--text-scale)); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
  :is(.listing-pagination, .listing-facets, .listing-filters, .map-picker, .vendor-controls, .mkt, .price-currency, .ct-form) optgroup option { margin-inline: -6px; color: var(--ink); font-size: calc(15px * var(--text-scale)); font-weight: 400; letter-spacing: 0; text-transform: none; }
  :is(.listing-pagination, .listing-facets, .listing-filters, .map-picker, .vendor-controls, .mkt, .price-currency, .ct-form) optgroup option:checked { color: var(--accent); }
}
@media (max-width: 760px), (pointer: coarse) {
  :is(.listing-pagination, .listing-facets, .listing-filters, .map-picker, .vendor-controls, .mkt, .price-currency, .ct-form) select { min-height: 44px; font-size: calc(16px * var(--text-scale)); }
  @supports (appearance: base-select) {
    :is(.listing-pagination, .listing-facets, .listing-filters, .map-picker, .vendor-controls, .mkt, .price-currency, .ct-form) option { min-height: 44px; font-size: calc(16px * var(--text-scale)); }
  }
}
@media (prefers-reduced-motion: reduce) { :is(.listing-pagination, .listing-facets, .listing-filters, .map-picker, .vendor-controls, .mkt, .price-currency, .ct-form) select { transition: none; } }


/* Opened search box on small screens: even breathing room above and below, a focus ring that stays inside the screen edge,
   a roomier icon inset, and a themed clear button instead of the browser's blue one. */
.top-in .search input { padding-right: 10px; }
.top-in .search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; flex: none; width: 36px; height: 36px; margin: 0 0 0 4px; cursor: pointer; background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 3l8 8M11 3l-8 8' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 3l8 8M11 3l-8 8' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat; }
.top-in .search input::-webkit-search-cancel-button:hover { background: var(--ink); }
@media (max-width: 760px) {
  html.js .top-in { padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px)); }
  html.js .top-in.search-open { row-gap: 12px; padding-bottom: 14px; }
  html.js .top-in.search-open .search input:focus-visible { outline-offset: 0; }
  .top-in .search svg { left: 14px; }
  .top-in .search input { padding-left: 44px; }
}

/* Navbar buttons on phones: one 44px column per button at every width, with the same gap between all of them
   (4px from 380px, 2px below, where 320px still leaves the logo 66px). */
@media (max-width: 479px) {
  html.js .top-in { grid-template-columns: minmax(64px, 1fr) repeat(5, 44px); column-gap: 4px; }
  html.js .top-in :is(.search-toggle, .lang, .text-size-btn, .theme-btn, .menu-btn) { width: 100%; min-width: 0; height: 44px; min-height: 44px; }
}
@media (max-width: 379px) {
  html.js .top-in { grid-template-columns: minmax(64px, 1fr) repeat(5, 44px); column-gap: 2px; }
  html.js .top-in :is(.search-toggle, .lang, .text-size-btn, .theme-btn, .menu-btn) { width: 100%; min-width: 0; height: 44px; min-height: 44px; }
}

/* Keep long sort choices readable; share a row on phones from 360px up. */
@media (max-width: 760px) {
  .listing-order:has([data-listing-availability]) { grid-template-columns: minmax(104px,.72fr) minmax(0,1.55fr); align-items: start; }
  .listing-order:has([data-listing-availability]) > .listing-pagination { min-width:0; }
  .listing-order:has([data-listing-availability]) > .listing-pagination > label { flex:1; }
}
@media (max-width: 359px) {
  .listing-order:has([data-listing-availability]) { grid-template-columns: minmax(0,1fr); }
}
:root:lang(de) .hero h1, :root:lang(ru) .hero h1 { hyphens:manual; -webkit-hyphens:manual; max-width:none; text-wrap:balance; }
.season-date { white-space:nowrap; }
:is(.listing-pagination, .listing-facets, .listing-filters, .map-picker, .vendor-controls, .mkt, .price-currency, .ct-form) select { white-space: nowrap; overflow: hidden; }

/* Flat outlines. Cards, panels and bands carry one 1px border all the way round and nothing else: no light-from-above
   highlights, inner "mount" rings, double frames or drop shadows that fake depth. Hover only strengthens the outline.
   (Floating layers such as dropdown popups and the menu drawer keep their shadow because they really do float.) */
.sec, .season, .hero { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: none; }
.hero { border-color: var(--line); border-radius: var(--r); }
.sec:hover { background: var(--wash); border-color: var(--line-strong); box-shadow: none; }
:root[data-theme="dark"] .season, :root[data-theme="dark"] .hero { box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .season, :root:not([data-theme="light"]) .hero { box-shadow: none; } }
.kfacts { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Mobile listing cards: the outline and both inner dividers use the same border colour in light and dark (the dividers were the
   faint hairline colour, nearly invisible in dark, against a stronger outline), they meet in one unbroken line instead of two
   segments with a gap. The sorted column is not marked on the card: an accent rule over one cell read as an unexplained price
   bar, and the sort state is already shown by the Sort by menu and its arrows. */
@container (max-width: 620px) {
  .lt tr, .production-offers .lt tr { border-color: var(--line-strong); column-gap: 0; }
  .lt :is(.c-pr, .c-pp) { border-top: 1px solid var(--line-strong); }
  .lt .c-pp { padding-inline-end: 8px; }
  .lt .c-pr { padding-inline-start: 8px; }
}

/* ===== East Asian typography layer (docs/east-asian-language-rules.md) ===== */
/* =====================================================================
   Cha.fyi CJK typography layer  (append AFTER the existing stylesheet)
   Scope: ja, zh-Hans, zh-Hant roots only. en / de / ru / ko are untouched
   (verified: zero computed-style differences on en, de, ru, ko pages).
   ===================================================================== */

/* ---- 0. Tokens: region-specific Han faces. Web font first, then the
        local face each OS ships for THAT region, then system-ui/sans-serif
        so the OS picks the region by the element's lang attribute. ----- */
:root {
  --sans-ja:   "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans CJK JP";
  --sans-hans: "Noto Sans SC", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC";
  --sans-hant: "Noto Sans TC", "PingFang TC", "PingFang HK", "Microsoft JhengHei UI", "Microsoft JhengHei", "Source Han Sans TC", "Noto Sans CJK TC";
  --serif-ja:   "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "MS PMincho", "Noto Serif CJK JP";
  --serif-hans: "Noto Serif SC", "Songti SC", "Source Han Serif SC", "STSong", "SimSun", "Noto Serif CJK SC";
  --serif-hant: "Noto Serif TC", "Songti TC", "Source Han Serif TC", "PMingLiU", "MingLiU", "Noto Serif CJK TC";
}

/* ---- 1. Shared CJK base ------------------------------------------- */
:root:is(:lang(ja), :lang(zh-Hans), :lang(zh-Hant)) {
  /* no faux bold / italic / small-caps on Han and kana (inherited) */
  font-synthesis: none;
  /* kinsoku: small kana and the long-vowel mark cannot start a line; ja body was
     line-break:auto (headings only were strict). zh was already strict. */
  line-break: strict;
  /* 1/8em between ideographs and Latin letters / digits (Chrome 140+, Safari 18.4+;
     ignored elsewhere). Replaces hand-typed spaces in mixed strings. */
  text-autospace: normal;   /* ja overrides this below (no gap before 年/月/万/円) */
  /* never hyphenate; Latin words inside CJK copy break only at spaces */
  hyphens: manual;
}
/* headings and short labels: balanced lines, no negative tracking, no
   Latin-style caps/tracking on Han */
:root:is(:lang(ja), :lang(zh-Hans), :lang(zh-Hant)) :is(h1, h2, h3, h4) { letter-spacing: 0; }
:root:is(:lang(ja), :lang(zh-Hans), :lang(zh-Hant)) :is(.kind, .eyebrow, .kl, .otp-h, .alm-h, .tbl th, .rend th, .lt th, .gtable thead th, .check-list .lvl) {
  text-transform: none;
  letter-spacing: 0;
}
/* Buttons, summaries, chips and header cells that wrap: balance the lines so a
   4-character label never breaks 3+1 ("包装价|格"). */
:root:is(:lang(ja), :lang(zh-Hans), :lang(zh-Hant)) :is(button, summary, label, th, .chip, .pill, .seg button, .listing-quick-sort button) {
  text-wrap-style: balance;   /* longhand: keeps white-space:nowrap cells nowrap (shorthand text-wrap resets text-wrap-mode) */
}
/* Short card/list descriptions: keep the last line from being one character + 。 */
:root:is(:lang(ja), :lang(zh-Hans), :lang(zh-Hant)) :is(.row .s, .cat p, .sec-d, .start-q-d, .start-intro, .alm-n, .why, p.path) {
  text-wrap-style: balance;
}
/* Table cells, definitions and list items: avoid a last line of one character */
:root:is(:lang(ja), :lang(zh-Hans), :lang(zh-Hant)) :is(td, dd, li) { text-wrap-style: pretty; }
/* Floor for Han labels: 11.5 / 12px strokes close up on phones */
:root:is(:lang(ja), :lang(zh-Hans), :lang(zh-Hant)) .kind { font-size: calc(12.5px * var(--text-scale)); }
:root:is(:lang(ja), :lang(zh-Hans), :lang(zh-Hant)) .source-accessed { font-size: calc(13px * var(--text-scale)); }
:root:is(:lang(ja), :lang(zh-Hans), :lang(zh-Hant)) :is(.tbl th, .rend th) { font-size: calc(14px * var(--text-scale)); }
/* Han next to monospace labels: the mono stack had no CJK face (ja fell to Osaka,
   zh to PingFang by accident). */
:root:lang(ja)      { --f-mono: "IBM Plex Mono", var(--sans-ja), ui-monospace, "SFMono-Regular", Menlo, monospace; }
:root:lang(zh-Hans) { --f-mono: "IBM Plex Mono", var(--sans-hans), ui-monospace, "SFMono-Regular", Menlo, monospace; }
:root:lang(zh-Hant) { --f-mono: "IBM Plex Mono", var(--sans-hant), ui-monospace, "SFMono-Regular", Menlo, monospace; }
/* The 18.5px italic pinyin <em>/.pinyin next to 17.5px Han inflates every .row .t line by 2px
   (34.4px instead of 32.4px at 17.5px/1.85, measured on ja and zh-Hant; en 30.9 vs 28.9). */
:root:is(:lang(ja), :lang(zh-Hans), :lang(zh-Hant)) :is(.row .t em, .alm-m i) { line-height: 1.2; }
/* No slanted kana: the 24 kana readings in <i> on ja pages (.alm-m i) were synthesised obliques
   (Source Sans 3 / Noto Sans JP italics are not loaded). Latin pinyin keeps its real Cormorant italic. */
:root:is(:lang(ja), :lang(zh-Hans), :lang(zh-Hant)) .alm-m i { font-style: normal; }

/* ---- 2. Japanese -------------------------------------------------- */
:root:lang(ja) {
  /* Japanese typesetting does not space numerals from 年/月/万/円; Chrome only accepts normal|no-autospace today. */
  text-autospace: no-autospace;
  text-spacing-trim: trim-start;   /* opening 「（ flush at line start */
  /* phrase-aware breaking (bunsetsu): never "綴|り", never "体系|的に". Chrome 119+,
     Safari 17.4+ on ja only; unsupported browsers keep line-break:strict. */
  word-break: auto-phrase;
  --f-body: "Source Sans 3", var(--sans-ja), system-ui, sans-serif;
  --f-display: "Cormorant Garamond", var(--serif-ja), serif;
}
/* BUG FIX: the ja heading line-height (1.45) lost to
   ":root:not(:lang(zh-Hans)):not(:lang(zh-Hant)) h1 {line-height:1.08}" (higher specificity),
   so the ja h1 was set at 1.08 and a 3-line h1 on phones was cramped.
   Specificity here is 0,4,1 to beat it. Better: add :not(:lang(ja)) to the source rule. */
:root:lang(ja):not(:lang(zh-Hans)):not(:lang(zh-Hant)) h1 { line-height: 1.4; }
/* proportional kana in headings (palt: 1.4% narrower on a 17-kana h1; marginal but free); body keeps full-width kana */
:root:lang(ja) :is(h1, h2, h3, .hero h1) { font-feature-settings: "palt"; }
/* the site's own ":root:lang(ja) :is(h1,h2,h3){word-break:normal}" overrides the inherited value, so restate it */
:root:lang(ja) :is(h1, h2, h3, h4) { word-break: auto-phrase; }
:root:lang(ja) :is(.lead, .hero .lead, main p) { word-break: auto-phrase; }

/* ---- 3. Simplified Chinese --------------------------------------- */
:root:lang(zh-Hans) {
  --f-body: "Source Sans 3", var(--sans-hans), system-ui, sans-serif;   /* drops "Noto Sans TC" from the SC stack */
  --f-han: var(--serif-hans), serif;
  --f-display: var(--f-han);
}
/* h3 was 16px (= body) in zh only; en/ja use 1.25em. Restore a step. */
:where(:root:lang(zh-Hans), :root:lang(zh-Hant)) main h3 { font-size: 1.1em; }   /* zero specificity: component h3 sizes win */

/* ---- 4. Traditional Chinese -------------------------------------- */
:root:lang(zh-Hant) {
  --f-body: "Source Sans 3", var(--sans-hant), system-ui, sans-serif;   /* TC first, no SC in the middle */
  --f-han: var(--serif-hant), serif;
  --f-display: var(--f-han);
}

/* ---- 5. Nested foreign-language spans ---------------------------------
   Chinese names in en/de/ru/ja pages, Japanese titles in zh pages.
   Needs the generator to emit lang on them (report section c). Everything is wrapped in
   :where() (0 specificity) so component rules such as ".glyphs{font-family:var(--f-han)}" still win.
   (a) Elements that already read var(--f-han) (serif role): only the custom property changes. */
:where([lang="zh-Hans"], [lang="zh-CN"]):not(:root) { --f-han: var(--serif-hans), serif; }
:where([lang="zh-Hant"], [lang="zh-TW"], [lang="zh-HK"]):not(:root) { --f-han: var(--serif-hant), serif; }
:where([lang="ja"]):not(:root) { --f-han: var(--serif-ja), serif; }
/*   (b) Inline tagged spans inside running prose (sans role). Restricted to prose containers so
       decorative spans (.sec-ch brush glyphs, mono labels) that inherit a deliberate face are not clobbered. */
:where(p, li, dd, td, th, figcaption, .note, .s, .lead, .why, .src, .source-usage, .rend, .facts) :where(span, a, em, cite, q, b, strong):where([lang="zh-Hans"], [lang="zh-CN"]) { font-family: "Source Sans 3", var(--sans-hans), system-ui, sans-serif; }
:where(p, li, dd, td, th, figcaption, .note, .s, .lead, .why, .src, .source-usage, .rend, .facts) :where(span, a, em, cite, q, b, strong):where([lang="zh-Hant"], [lang="zh-TW"], [lang="zh-HK"]) { font-family: "Source Sans 3", var(--sans-hant), system-ui, sans-serif; }
:where(p, li, dd, td, th, figcaption, .note, .s, .lead, .why, .src, .source-usage, .rend, .facts) :where(span, a, em, cite, q, b, strong):where([lang="ja"]) { font-family: "Source Sans 3", var(--sans-ja), system-ui, sans-serif; }
/*   (c) inside serif display contexts a tagged span follows the heading face of its OWN language */
:where(h1, h2, h3, h4) :where([lang="zh-Hans"], [lang="zh-CN"], [lang="zh-Hant"], [lang="zh-TW"], [lang="zh-HK"], [lang="ja"]) { font-family: var(--f-han); }
/*   (d) no faux bold/italic on tagged Han/kana, anywhere */
:where([lang="zh-Hans"], [lang="zh-Hant"], [lang="ja"]):not(:root) { font-synthesis: none; }
/*   (e) pinyin / romanisation (lang=zh-Latn) inside a CJK page: Latin rules, not CJK rules */
:root:is(:lang(ja), :lang(zh-Hans), :lang(zh-Hant)) :lang(zh-Latn) { word-break: normal; text-autospace: no-autospace; letter-spacing: 0; text-transform: none; }

/* ---- 6. Korean readiness (do NOT enable; ko is disabled in lib/i18n.js) ---
:root:lang(ko) {
  --f-body: "Source Sans 3", "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --f-display: "Cormorant Garamond", "Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo", "Batang", serif;
  --f-mono: "IBM Plex Mono", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", ui-monospace, monospace;
  --fs-body: clamp(16px, 14.8px + .3vw, 17.5px); --lh-body: 1.75; --measure: 40em;
  font-synthesis: none; hyphens: none; line-break: strict;
  word-break: keep-all;           // Hangul breaks between eojeol (spaces), never inside a word
  overflow-wrap: break-word;     // long Latin/URLs may still break
  text-autospace: normal;
}
:root:lang(ko) :is(h1, h2, h3) { letter-spacing: 0; line-height: 1.4; text-wrap: balance; }
:lang(ko) :is(.kind, .eyebrow, .kl) { text-transform: none; letter-spacing: 0; }
:where([lang="ko"]):not(:root) { font-family: "Source Sans 3", "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; }
// Hanja: render as <span lang="ko">漢字</span> with the hangul reading first (한자 漢字), using the Korean
// face above so the glyph variants are the KS forms; never inherit the zh/ja Han stack.
*/


/* =====================================================================
   ADDENDA from the per-language reviewers (each tested by injection in Chrome 155)
   ===================================================================== */

/* ---- 7. Japanese extras ------------------------------------------- */
/* Long unbroken phrases may break as a last resort; otherwise auto-phrase widens grid items past the
   viewport (measured +12px at 320px on /ja/learn/, +49px on the 100g sort button). */
:root:lang(ja) :is(h1, h2, h3, h4, p, li, dd, button, summary, th, .pill, .claim, .shiptag, .pos, .compact-heading) { overflow-wrap: anywhere; }
:root:lang(ja) :is(p, li, dd, .lead, .note, .path, .te, .kv, .source-notes, .why) { line-height: 1.8; }
:root:lang(ja) :is(.count, [class*="count"], .n) { white-space: nowrap; }
:root:lang(ja) :is(td, .price, .num, [class*="count"]) { font-variant-numeric: lining-nums tabular-nums; }
:root:lang(ja) [lang="zh-Latn"], :root:lang(ja) .pinyin, :root:lang(ja) [lang="en"] { font-style: normal; }

/* ---- 8. Simplified Chinese extras --------------------------------- */
/* Pinyin upright: tone marks are illegible in 14-18px italic Cormorant. */
html:root:lang(zh-Hans) :is(.pinyin, .cat-pinyin, .row .t em, .alias-pinyin, em[lang="zh-Latn"], .jieqi span, .season-term span) {
  font-family: var(--f-body); font-style: normal; font-weight: 400; letter-spacing: .01em;
}
html:root:lang(zh-Hans) .pinyin { font-size: calc(17px * var(--text-scale)); }
html:root:lang(zh-Hans) .row .t em { font-size: .92em; }
html:root:lang(zh-Hans) :is(.kind, .eyebrow, .check-list .lvl) { font-family: var(--f-body); }
/* Recipe cards: a Han recipe name squeezed the name column to one character per line at 768px. */
html:root:lang(zh-Hans) .recipe-card { grid-template-columns: minmax(0, max-content) minmax(6em, 1fr); }
html:root:lang(zh-Hans) .recipe-code { overflow-wrap: anywhere; }
@media (max-width: 1100px) { html:root:lang(zh-Hans) .recipe-card { grid-template-columns: minmax(0, 1fr); } }
html:root:lang(zh-Hans) :is(.tbl a, .source-notes, .srcchip-label, .listing-title) { overflow-wrap: anywhere; }
html:root:lang(zh-Hans) :is(.listing-title-han, .source-title, .tbl a, .alias-name)[lang="zh-Hant"] { font-family: "Source Sans 3", var(--sans-hant), sans-serif; }

/* ---- 9. Traditional Chinese extras -------------------------------- */
:root:lang(zh-Hant) { quotes: "「" "」" "『" "』"; }
/* buttons and form controls fell back to Arial (back-top, theme, search-toggle, listing filter toggle) */
:root:lang(zh-Hant) :is(button, input, select, textarea) { font-family: inherit; }


/* font-synthesis: none is for Han and kana; Latin italics that rely on a synthesized oblique (species names, map labels) keep it */
:root:is(:lang(ja), :lang(zh-Hans), :lang(zh-Hant)) :is(i, em, cite, dfn, svg text) { font-synthesis-style: auto; }

/* ===== visual-review fixes (docs/east-asian-fixes-visual-review.css) ===== */
/* a tagged span nested in an element that already carries the serif Han role keeps a Han serif of its OWN script */
.zh [lang], .han [lang], .glyphs [lang], .alias-name [lang], .alias-chinese [lang] { font-family: var(--f-han); }
[data-quick-sort] > [aria-hidden="true"], [data-listing-sort-dir], .sort-arrow { font-family: system-ui, "Segoe UI Symbol", sans-serif; }
.listing-quick-sort { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.listing-order:has([data-listing-availability]) > .listing-quick-sort { grid-column: 1 / -1; }
.listing-quick-sort button { min-width: 0; }
/* guide headings and TOC links are flex rows: every inline child (now incl. <span lang>) became its own flex item */
.gsec h2 { display: block; position: relative; padding-inline-start: calc(1.84em + var(--s3)); }
.gsec h2 > .gsn { position: absolute; inset-inline-start: 0; top: 0; line-height: inherit; }
.gtoc a { display: block; position: relative; padding-inline-start: calc(6px + 3.4em + 12px); }
.gtoc a > span:first-child { position: absolute; inset-inline-start: 6px; top: 5px; }
.gtoc a > span:not(:first-child) { font-family: inherit; color: inherit; min-width: 0; }
/* h3/h4 are sans (Source Sans 3), so a tagged Han span follows the SANS face of its own script; h1/h2 (Cormorant) keep the serif rule */
:where(h3, h4) :where([lang="zh-Hans"], [lang="zh-CN"]) { font-family: "Source Sans 3", var(--sans-hans), system-ui, sans-serif; }
:where(h3, h4) :where([lang="zh-Hant"], [lang="zh-TW"], [lang="zh-HK"]) { font-family: "Source Sans 3", var(--sans-hant), system-ui, sans-serif; }
:where(h3, h4) :where([lang="ja"]) { font-family: "Source Sans 3", var(--sans-ja), system-ui, sans-serif; }



/* Compact screens: the top bar keeps brand, search and Menu. Language, currency, text size and theme are moved into the menu drawer by script. */
@media (max-width: 760px) {
  html.js .top-in :is(.lang, .currency, .text-size-btn, .theme-btn) { display: none; }
  .sheet-prefs { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
  .sheet-prefs :is(.lang, .currency) { position: relative; display: block; flex: 1 1 100%; width: 100%; height: auto; min-width: 0; padding: 0; border: 0; background: none; }
  .sheet-prefs :is(.lang, .currency) select { position: static; display: block; width: 100%; max-width: none; min-width: 0; height: 48px; min-height: 48px; opacity: 1; padding-block: 0; padding-inline: 14px 34px; font: 400 calc(16px * var(--text-scale)) / 1.25 var(--f-body); color: var(--ink); text-overflow: ellipsis; border: 1px solid var(--line); border-radius: 6px; background-color: var(--bg); cursor: pointer; }
  .sheet-prefs .lang select { padding-inline-start: 44px; }
  .sheet-prefs .lang .lang-symbol { display: block; top: 50%; left: 14px; transform: translateY(-50%); }
  .sheet-prefs .currency select { appearance: none; -webkit-appearance: none; background-image: var(--chev); background-position: right 14px center; background-size: 10px 6px; background-repeat: no-repeat; }
  .sheet-prefs .lang select { background-image: none; }
  .sheet-prefs .lang .nav-chevron { right: 14px; }
  .sheet-prefs .currency :is(#currency-symbol, .currency-arrow) { display: none; }
  /* Keep the styled native picker when preferences move out of the desktop header. */
  @supports (appearance: base-select) {
    .sheet-prefs :is(.lang, .currency) select,
    .sheet-prefs :is(.lang, .currency) select::picker(select) { appearance: base-select; }
    .sheet-prefs :is(.lang, .currency) select { display: flex; align-items: center; }
    .sheet-prefs :is(.lang, .currency) select::picker(select) { box-sizing: border-box; min-width: anchor-size(width); max-width: calc(100vw - 24px); max-height: min(360px, 60dvh); overflow-y: auto; overscroll-behavior: contain; }
    .sheet-prefs :is(.lang, .currency) option { white-space: normal; overflow-wrap: anywhere; }
    .sheet-prefs :is(.lang, .currency) option:checked:is(:hover, :focus) { background: var(--accent-soft); }
  }
  .sheet-prefs :is(.lang, .currency) select:hover { border-color: var(--line-strong); background-color: var(--wash); }
  .sheet-prefs :is(.lang, .currency) select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .sheet-prefs :is(.text-size-btn, .theme-btn) { flex: 1 1 calc(50% - 5px); display: inline-flex; align-items: center; justify-content: flex-start; gap: 10px; width: auto; height: auto; min-height: 44px; padding: 8px 12px; font: 600 calc(14px * var(--text-scale)) / 1.25 var(--f-body); text-align: start; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; background: var(--bg); cursor: pointer; }
  .sheet-prefs :is(.text-size-btn, .theme-btn)::after { content: attr(aria-label); font-weight: 400; color: var(--muted); }
  .sheet-prefs :is(.text-size-btn, .theme-btn):hover { border-color: var(--line-strong); background: var(--wash); }
  .sheet-prefs :is(.text-size-btn, .theme-btn):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .sheet-prefs .text-size-btn[aria-pressed="true"] { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
  /* A single settings row when labels fit; narrow/enlarged layouts keep two clear rows. */
  .sheet .sheet-in { padding: max(10px, env(safe-area-inset-top, 0px)) 12px max(16px, env(safe-area-inset-bottom, 0px)); scrollbar-gutter: stable; }
  .sheet .sheet-head { padding-block: 0 8px; }
  .sheet .sheet-title { font-size: calc(22px * var(--text-scale)); }
  .sheet .sheet-close { width: 44px; height: 44px; flex-basis: 44px; }
  .sheet .secs.compact { gap: 6px; }
  .sheet .secs.compact .sec { min-height: 44px; padding: 6px 12px; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
  .sheet .sec .sec-ch { display: block; right: 6px; bottom: -4px; font-size: calc(36px * var(--text-scale)); opacity: .035; pointer-events: none; }
  .sheet .sec .sec-t { position: relative; }
  .sheet .sec .sec-t { flex: 1 1 auto; flex-wrap: wrap; align-items: baseline; justify-content: space-between; min-width: 0; width: 100%; gap: 2px 8px; font-size: calc(15px * var(--text-scale)); line-height: 1.35; text-wrap: pretty; }
  .sheet .sec .sec-n { flex: 0 0 auto; font: 400 calc(12px * var(--text-scale)) var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
  .sheet-prefs { display: grid; grid-template-columns: minmax(0, 1fr) 76px 44px 44px; align-items: stretch; gap: 6px; margin: 0 0 12px; padding: 0 0 12px; border-top: 0; border-bottom: 1px solid var(--line); }
  .sheet-prefs .lang { grid-column: 1; grid-row: 1; width: 100%; }
  .sheet-prefs .currency { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: flex-start; height: 44px; padding: 0 26px 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
  .sheet-prefs .text-size-btn { grid-column: 3; grid-row: 1; }
  .sheet-prefs .theme-btn { grid-column: 4; grid-row: 1; }
  .sheet-prefs .currency #currency-code { display: block; position: relative; z-index: 1; pointer-events: none; font: 400 calc(15px * var(--text-scale)) / 1.25 var(--f-body); }
  .sheet-prefs .currency .nav-chevron { display: block; right: 10px; z-index: 1; }
  .sheet-prefs .currency select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; padding: 0; border: 0; background: transparent; color: transparent; font-size: 0; border-radius: inherit; }
  .sheet-prefs .currency:hover { background: var(--wash); border-color: var(--line-strong); }
  .sheet-prefs .currency select:hover { background: transparent; }
  @supports (appearance: base-select) { .sheet-prefs .currency select { opacity: 1; } .sheet-prefs .currency select::picker(select) { min-width: min(280px, calc(100vw - 24px)); } }

  .sheet-prefs :is(.lang, .currency) select { height: 44px; min-height: 44px; }
  .sheet-prefs .lang select { font-size: calc(15px * var(--text-scale)); }
  .sheet-prefs :is(.text-size-btn, .theme-btn) { flex: 1 1 calc(50% - 3px); width: auto; height: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .sheet-prefs :is(.text-size-btn, .theme-btn)::after { content: none; }
  .sheet-prefs .text-size-btn { font-size: calc(18px * var(--text-scale)); font-weight: 400; line-height: 1.25; }
  .sheet-prefs .theme-btn svg { width: calc(20px * var(--text-scale)); height: calc(20px * var(--text-scale)); flex: none; }
}
@media (max-width: 359px) {
  .sheet-prefs { grid-template-columns: minmax(0, 1fr) 44px 44px; }
  .sheet-prefs .lang { grid-column: 1 / -1; }
  .sheet-prefs .currency { grid-column: 1; grid-row: 2; }
  .sheet-prefs .text-size-btn { grid-column: 2; grid-row: 2; }
  .sheet-prefs .theme-btn { grid-column: 3; grid-row: 2; }
}
@media (max-width: 419px) {
  :root[data-text-size="large"] .sheet-prefs { grid-template-columns: minmax(0, 1fr) 44px 44px; }
  :root[data-text-size="large"] .sheet-prefs .lang { grid-column: 1 / -1; }
  :root[data-text-size="large"] .sheet-prefs .currency { grid-column: 1; grid-row: 2; }
  :root[data-text-size="large"] .sheet-prefs .text-size-btn { grid-column: 2; grid-row: 2; }
  :root[data-text-size="large"] .sheet-prefs .theme-btn { grid-column: 3; grid-row: 2; }
}
@media (max-width: 760px) and (max-height: 640px) {
  .sheet .secs.compact { gap: 4px; }
  .sheet .secs.compact .sec { min-height: 44px; padding-block: 6px; }
  .sheet .sheet-head { padding-bottom: 6px; }
  .sheet-prefs { margin-bottom: 10px; padding-bottom: 10px; }
  .sheet-prefs :is(.lang, .currency) select, .sheet-prefs :is(.text-size-btn, .theme-btn) { height: 44px; min-height: 44px; }
}
@media (max-width: 479px) {
  .sheet .sheet-in { flex-basis: 100%; width: 100%; max-width: 100%; border-left: 0; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
  html.js .top-in { grid-template-columns: minmax(64px, 1fr) repeat(2, 44px); }
  html.js .top-in .menu-btn { grid-column: 3; }
}

/* Mobile header: align the two actions to the content edge and one shared grid. */
@media (max-width: 760px) {
  html.js .top-in { display: grid; grid-template-columns: minmax(64px, 1fr) repeat(2, 44px); align-items: center; gap: 8px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); }
  html.js .top-in .brand { grid-column: 1; grid-row: 1; }
  html.js .top-in .search-toggle { grid-column: 2; grid-row: 1; }
  html.js .top-in .menu-btn { grid-column: 3; grid-row: 1; }
  html.js .top-in :is(.search-toggle, .menu-btn) { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; margin: 0; border-radius: 6px; line-height: 1; }
  html.js .top-in :is(.search-toggle, .menu-btn) > svg { display: block; flex: none; width: 20px; height: 20px; }
  html.js .top-in.search-open .search { grid-column: 1 / -1; grid-row: 2; }
}
.offer-details-visible{margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.offer-details-visible .offer-details-heading{font-size:var(--fs-small);font-weight:500;color:var(--muted)}
.offer-details-visible dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:6px 16px;margin:8px 0}
.offer-details-visible dl>div{min-width:0}.offer-details-visible dd{margin:0;overflow-wrap:anywhere}
.price-note-visible p{margin:4px 0;line-height:1.5}.date-qualification{margin:8px 0;color:var(--muted)}
.vendor-reading-more{margin-top:12px}.vendor-reading-more summary{padding:10px 0;min-height:44px;cursor:pointer;color:var(--muted)}
.shipping-disclosure{margin-top:6px;color:var(--muted);font-size:calc(13px * var(--text-scale));line-height:1.45;max-width:100%;font-weight:400}.shipping-disclosure summary{display:flex;align-items:baseline;gap:6px;cursor:pointer;list-style:none;padding:4px 0;min-height:28px}.shipping-disclosure summary::-webkit-details-marker{display:none}.shipping-chevron{flex:none;font-size:18px;line-height:1;transition:transform .15s}.shipping-disclosure[open] .shipping-chevron{transform:rotate(90deg)}.shipping-disclosure summary:hover{color:var(--ink)}.shipping-disclosure summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}.shipping-expanded{padding:8px 0 4px;border-top:1px solid var(--line)}.shipping-expanded p{margin:0 0 8px;line-height:1.5}.shipping-disclosure .ship-check{display:none}@container(max-width:620px){.shipping-disclosure{flex-basis:100%;margin-top:0}.shipping-disclosure summary{min-height:36px;padding-block:6px}}
.profile-vendor .entry-lead,.profile-tea .entry-lead{max-width:64ch;line-height:1.6}.profile-actions{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-top:-12px}.profile-actions a{display:inline-flex;gap:6px;align-items:center;min-height:44px;font-weight:500}.profile-actions a:first-child{padding:6px 16px;border:1px solid var(--line-strong);border-radius:6px;text-decoration:none}.profile-actions a:first-child:hover{background:var(--wash)}.profile-actions span{color:var(--muted)}.profile-vendor #facts,.profile-tea #facts{padding-block:16px;border-block:1px solid var(--line)}.profile-vendor #facts .facts,.profile-tea #facts .facts{margin:0;row-gap:10px}.vendor-practical{margin-top:16px;border-top:1px solid var(--line);padding-top:8px}.vendor-practical>summary{cursor:pointer;padding:10px 0;color:var(--muted);font-weight:500}.vendor-practical .facts{padding-top:12px}.vendor-practical .shiptag{border:0;padding:0;min-height:0}.vendor-practical .chips{gap:5px 12px}.profile-vendor .note,.profile-tea .note{line-height:1.65}.profile-tea #prices-by-sales-channel{border-top:1px solid var(--line);padding-top:20px}.profile-vendor .otp,.profile-tea .otp{margin-block:4px}@media(max-width:620px){.profile-actions{gap:8px 18px}.profile-vendor #facts>.facts,.profile-tea #facts>.facts{display:grid;grid-template-columns:minmax(80px,.65fr) minmax(0,1.8fr);gap:10px 14px}.profile-vendor #facts>.facts :is(dt,dd),.profile-tea #facts>.facts :is(dt,dd){margin:0;padding:0;min-width:0;overflow-wrap:anywhere}.profile-vendor #facts,.profile-tea #facts{padding-block:12px}.vendor-practical .facts{grid-template-columns:1fr}.vendor-practical dt{margin-top:10px}.vendor-practical dd{margin-left:0}}

.search-groups{display:flex;flex-wrap:wrap;gap:8px 18px;padding:12px 0;border-block:1px solid var(--line)}
.search-groups a{display:inline-flex;align-items:baseline;gap:6px;padding:5px 0;color:var(--ink)}
.search-groups .count{color:var(--muted);font-size:.85em}
.sgroup{scroll-margin-top:90px}.search-more{margin-top:10px}
.vendor-delivery{margin:8px 0 16px;max-width:65ch}.comparison-scope{max-width:85ch;margin:12px 0 16px;line-height:1.55}

/* A readable directory: full titles and summaries, without fixed card heights. */
.learn-index{display:flex;flex-wrap:wrap;gap:4px;margin-top:12px;margin-inline:-8px}
.learn-index a{display:inline-flex;align-items:center;min-height:40px;max-width:100%;padding:6px 8px;border-radius:4px;font-size:var(--fs-small);line-height:1.45;color:var(--muted);text-decoration:none;transition:color 140ms ease,background-color 140ms ease}
@media(hover:hover){.learn-index a:hover{color:var(--ink);background:var(--wash);text-decoration:none}}
.learn-index a:focus-visible{color:var(--ink);background:var(--wash);outline:2px solid var(--accent);outline-offset:-2px}
.learn-index a:active{color:var(--ink);background:var(--accent-soft)}
@media(pointer:coarse){.learn-index a{min-height:44px}}
@media(prefers-reduced-motion:reduce){.learn-index a{transition:none}}
.learn-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 28px}
.learn-overview-item{min-width:0;border-top:1px solid var(--line-strong);padding-top:12px}
:root .learn-hub .learn-overview-item h2{font-family:var(--f-body);font-size:calc(17px * var(--text-scale));line-height:1.4;margin:0;border:0;padding:0}
.learn-overview-item h2 a{display:flex;align-items:start;justify-content:space-between;gap:12px;min-height:36px;color:var(--ink);text-decoration:none;border-radius:3px}
.learn-overview-item h2 .h-link{display:none}
.learn-topic-chevron{color:var(--muted);flex:none;margin-top:4px}
.learn-overview-item h2 a:hover{background:var(--wash);text-decoration:none}
.learn-overview-item a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.learn-overview-item p{color:var(--muted);font-size:var(--fs-small);line-height:1.55;margin:2px 0 6px}
.learn-overview-item ul{list-style:none;padding:0;margin:0}
.learn-overview-item li a{display:inline-block;padding:6px 0;font-size:var(--fs-small);line-height:1.45;text-decoration-color:var(--line-strong);text-underline-offset:3px}
@media(max-width:1100px){.learn-overview{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.learn-overview{grid-template-columns:1fr;gap:20px}.learn-overview-item h2 a{min-height:44px}.learn-overview-item li a{min-height:44px;align-content:center}}
.learn-topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:32px 40px}.learn-topic{min-width:0;border-top:1px solid var(--line-strong);padding-top:16px;scroll-margin-top:100px}.learn-topic h3{margin:0 0 12px;font-size:calc(21px * var(--text-scale));line-height:1.3}.learn-guide-list{list-style:none;margin:0;padding:0}.learn-guide-list li{padding:10px 0;min-width:0}.learn-guide-list a{font-weight:600;line-height:1.45;text-decoration-color:var(--line-strong);text-underline-offset:4px}.learn-guide-list p,.learn-tools p{margin:5px 0 0;color:var(--muted);font-size:var(--fs-small);line-height:1.6}.learn-draft{font-size:var(--fs-small);color:var(--muted);font-weight:400}.learn-reference{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:6px;font-size:var(--fs-small)}.learn-reference .link-arrow{color:var(--muted)}.learn-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.learn-tools article{border-top:1px solid var(--line);padding-top:16px;min-width:0}.learn-tools h3{margin:0;font-size:calc(21px * var(--text-scale));line-height:1.35}.learn-hub #termbase .doms{margin-top:16px}.processing-page{max-width:1100px}.learn-hub :is(h3,a,p){overflow-wrap:break-word}
@media(max-width:760px){.learn-topics,.learn-tools{grid-template-columns:1fr;gap:24px}.learn-index{gap:2px 4px}.learn-topic h3,.learn-tools h3{font-size:calc(20px * var(--text-scale))}}

/* Sections sheet: tiles match the home cards (title, count, one-line description, brush character). */
@media (max-width: 760px) {
  .sheet .secs.compact { gap: 8px; }
  .sheet .secs.compact .sec { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; min-height: 84px; padding: 10px 12px; }
  .sheet .secs.compact .sec-t { position: relative; flex: 0 0 auto; width: 100%; font-size: calc(16px * var(--text-scale)); line-height: 1.25; font-weight: 600; }
  .sheet .secs.compact .sec-d { position: relative; display: block; max-width: 17ch; font-size: calc(13px * var(--text-scale)); line-height: 1.4; color: var(--muted); }
  .sheet .secs.compact .sec .sec-ch { right: 8px; bottom: 8px; font-size: calc(60px * var(--text-scale)); opacity: .07; }
  .sheet .secs.compact .sec[aria-current] .sec-ch { color: var(--seal); opacity: .16; }
}
@media (max-width: 760px) and (max-height: 640px) {
  .sheet .secs.compact .sec-d { display: none; }
  .sheet .secs.compact .sec { min-height: 48px; justify-content: center; }
}