/* The lookup: /lookup, /character/商, /word/商人 (pages/lookup.html,
   assets/lookup.js). The breakdown itself is charview.css, shared with the
   learn host, and the search bar is site.css .gsearch, shared with the door;
   this sheet is everything around them.

   ONE QUIET COLUMN (owner, 2026-10-05, pointing at HanziCraft: "Das sieht
   noch cleaner aus. Ich will das cleaner haben."). The character on practice
   paper, its reading and meaning under it, one line of facts in plain text,
   then sections with a small heading and no boxes, chips or cards. Lines
   between rows do the work borders did. */

.lookup-page { background: var(--bg); }
.lk { max-width: 760px; margin: 0 auto; padding: 56px 24px 72px; }

/* /lookup itself: the bar is the page (lookup.js moves it into #lk-home). */
.lk-home { display: none; }
.lk-searching .lk-home { display: block; margin-top: 8vh; }
.lk-hint { margin: 14px 24px 0; color: var(--muted); font-size: var(--fs-fine); }

/* ── Results ───────────────────────────────────────────────────────────── */
.lk-results-h { margin: 44px 0 0; font-family: 'Fraunces', serif; font-size: 28px; font-weight: 500; }
.lk-none { margin-top: 48px; color: var(--fg-2); text-align: center; }
/* Loading: the seal breathing, so a slow shard reads as work and not as a
   broken page. */
.lk-loading { margin: 12vh auto 0; display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--muted); font-size: var(--fs-fine); }
.lk-loading-seal {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 13px; background: var(--seal); color: #FFF8EE;
  animation: lk-breathe 1.4s ease-in-out infinite;
}
.lk-loading-seal span { font-family: 'Noto Serif SC', serif; font-size: 17px; font-weight: 600; line-height: 1.02; text-align: center; }
@keyframes lk-breathe { 0%, 100% { transform: scale(.94) rotate(-4deg); opacity: .75; } 50% { transform: scale(1) rotate(0deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lk-loading-seal { animation: none; } }
.lk-try { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 36px 24px 0; padding: 0; }
.lk-try a { font-size: 26px; color: var(--fg); text-decoration: none; border-bottom: 1px solid transparent; }
.lk-try a:hover { color: var(--seal-text); border-bottom-color: currentColor; }

/* ── The head of an entry ──────────────────────────────────────────────── */
.lk-hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* 田字格, the practice square: a frame and a dashed cross. */
.lk-glyph {
  position: relative; width: 208px; height: 208px; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--seal) 30%, var(--hair));
}
.lk-glyph::before, .lk-glyph::after { content: ''; position: absolute; pointer-events: none; }
.lk-glyph::before { left: 50%; top: 0; bottom: 0; border-left: 1px dashed color-mix(in srgb, var(--seal) 22%, transparent); }
.lk-glyph::after { top: 50%; left: 0; right: 0; border-top: 1px dashed color-mix(in srgb, var(--seal) 22%, transparent); }
.lk-glyph svg { position: relative; z-index: 1; width: 180px; height: 180px; }
.lk-glyph .strokes path { fill: var(--fg); }

/* The character writes itself (lookup.js writeSVG): a faint ghost of the
   whole, and each stroke a thick line along its spine, clipped to its
   outline, its dash run out from where the brush starts. */
.lk-write { position: relative; z-index: 1; width: 180px; height: 180px; }
.lk-w-ghost { fill: color-mix(in srgb, var(--fg) 8%, transparent); }
.lk-w-ink {
  fill: none; stroke: var(--fg); stroke-width: 150; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len) calc(var(--len) + 20); stroke-dashoffset: var(--len);
  animation: lk-write var(--t) cubic-bezier(.45, .05, .55, .95) var(--d) forwards;
}
.lk-w-solid { fill: var(--fg); opacity: 0; animation: lk-fade .3s ease-out var(--d) forwards; }
@keyframes lk-write { to { stroke-dashoffset: 0; } }
@keyframes lk-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .lk-w-ink { animation: none; stroke-dashoffset: 0; }
  .lk-w-solid { animation: none; opacity: 1; }
}
/* Under the square: write it again, and the character as a computer sets it. */
.lk-glyph-ctl { min-width: 208px; margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 20px; white-space: nowrap; }
.lk-replay {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px; border: 0; background: none;
  color: var(--fg-2); font: inherit; font-size: 12.5px; cursor: pointer;
}
.lk-replay svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lk-replay:hover { color: var(--seal-text); }
.lk-word-ctl { margin: 16px 0 0; }
.lk-learned {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; border-radius: 99px;
  border: 1.5px solid color-mix(in srgb, var(--jade) 60%, transparent); background: color-mix(in srgb, var(--jade) 10%, var(--card));
  color: color-mix(in srgb, var(--jade) 70%, var(--fg)); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background .2s, color .2s;
}
.lk-learned svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lk-learned:hover { background: var(--jade); color: #fff; }
.lk-print { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.lk-print-h {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--hair); border-radius: 7px;
  background: var(--card); color: var(--fg); font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 19px; line-height: 1;
}
.lk-glyph-plain { position: relative; z-index: 1; font-family: 'Noto Serif SC', serif; font-size: 140px; line-height: 1; }
.lk-word { display: flex; }
.lk-word .lk-glyph + .lk-glyph { border-left: 0; }
.lk-glyph-sm { width: 150px; height: 150px; }
.lk-glyph-sm svg { width: 128px; height: 128px; }
.lk-glyph-sm .lk-glyph-plain { font-size: 100px; }

/* A polyphone's readings, each with its own speaker; the taught one first. */
.lk-readings { list-style: none; margin: 24px 0 4px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lk-readings li {
  display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; column-gap: 4px;
  padding: 8px 12px 9px 16px; border: 1px solid var(--hair); border-radius: 14px; background: var(--card); text-align: left;
}
.lk-readings li.is-main { border-color: color-mix(in srgb, var(--seal) 35%, var(--hair)); }
.lk-rd-py { font-size: 22px; font-weight: 600; line-height: 1.2; }
.lk-rd-m { grid-column: 1 / -1; color: var(--fg-2); font-size: var(--fs-fine); }
.lk-readings .lk-play { width: 30px; height: 30px; }
.lk-readings .lk-play svg { width: 17px; height: 17px; }
.lk-py { margin: 26px 0 0; display: flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 500; }
.lk-m { margin: 6px 0 0; font-family: 'Fraunces', serif; font-size: 38px; font-weight: 500; line-height: 1.15; }
.lk-full { margin: 8px 0 0; max-width: 52ch; color: var(--fg-2); }
.lk-tags { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lk-tags li {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 99px;
  background: var(--card); border: 1px solid var(--hair); color: var(--fg); font-size: 15px; font-weight: 500;
}
.lk-tags .tag-freq { background: var(--seal-soft); border-color: color-mix(in srgb, var(--seal) 35%, transparent); color: var(--seal-text); font-weight: 600; }
.lk-tags .tag-freq::before { content: '#'; font-family: var(--serif, Georgia), serif; font-size: 17px; opacity: .7; }
.lk-tags .tag-hsk { background: var(--fg); border-color: var(--fg); color: var(--bg); font-weight: 600; }
.lk-tags .hz { font-family: 'Noto Serif SC', serif; font-size: 18px; color: var(--fg); text-decoration: none; }
.lk-tags a.hz:hover { color: var(--seal-text); }
.lk-dot { color: var(--muted); }
.lk-play {
  width: 34px; height: 34px; display: inline-grid; place-items: center; border: 0; border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer;
}
.lk-play svg { width: 20px; height: 20px; fill: currentColor; }
.lk-play:hover { color: var(--seal-text); background: var(--seal-soft); }

/* How far this character gets you, and the way to keep count. */
.lk-prog {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "tiles go" "mid mid"; align-items: center; gap: 16px 22px; margin-top: 36px;
  padding: 20px 22px; border-radius: 20px; border: 1.5px solid color-mix(in srgb, var(--seal) 45%, transparent);
  background: linear-gradient(100deg, color-mix(in srgb, var(--seal) 6%, var(--card)), var(--card) 60%);
}
.lk-prog-tiles { grid-area: tiles; list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.lk-prog-mid { grid-area: mid; }
.lk-prog-tiles li {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px;
  border: 1.5px solid color-mix(in srgb, var(--jade) 45%, transparent); background: color-mix(in srgb, var(--jade) 10%, var(--card));
  font-family: 'Noto Serif SC', serif; font-size: 23px;
}
.lk-prog-tiles li:first-child { border-color: var(--jade); background: color-mix(in srgb, var(--jade) 22%, var(--card)); }
.lk-prog-k { margin: 0 0 8px; font-size: 15px; }
.lk-prog-k b { font-weight: 700; color: color-mix(in srgb, var(--jade) 70%, var(--fg)); }
.lk-prog-bar { position: relative; margin: 0; height: 10px; border-radius: 99px; background: var(--raised); overflow: hidden; }
.lk-prog-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--jade) 75%, #fff), var(--jade)); }
.lk-prog-txt { margin: 8px 0 0; color: var(--fg-2); font-size: var(--fs-fine); line-height: 1.5; }
.lk-prog-go {
  grid-area: go; padding: 12px 18px; border-radius: 12px; background: var(--seal); color: #fff; font-weight: 600; font-size: 15px;
  text-decoration: none; white-space: nowrap;
}
.lk-prog-go:hover { background: var(--seal-press, #D8512F); }
@media (max-width: 560px) {
  .lk-prog { grid-template-columns: 1fr; grid-template-areas: "tiles" "mid" "go"; }
  .lk-prog-go { justify-self: start; }
}

/* ── Sections ──────────────────────────────────────────────────────────── */
.lk-sec { margin-top: 64px; scroll-margin-top: calc(var(--pad) + var(--bar-h) + 72px); }

/* The page's sections in one row (lookup.js jumpHTML). It stays under the
   pill on a wide screen and marks the section you are in; on a phone it
   floats at the bottom once the head has gone (below). Its slot keeps the
   row's height, so the page does not jump when it leaves. */
.lk-jump-slot { display: contents; }
@media (max-width: 899px) { .lk-jump-slot { display: block; min-height: 88px; } }
.lk-jump {
  display: flex; flex-wrap: nowrap; justify-content: center; gap: 2px; margin-top: 40px; padding: 6px;
  margin-left: 50%; translate: -50% 0;
  width: max-content; max-width: calc(100vw - 2 * var(--pad)); overflow-x: auto; scrollbar-width: none;
  border: 1px solid var(--hair); border-radius: 999px; background: var(--card);
}
.lk-jump a {
  padding: 6px 13px; border-radius: 999px; color: var(--fg-2); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background .15s, color .15s;
}
.lk-jump a:hover { color: var(--fg); background: var(--raised); }
.lk-jump a.on { color: var(--seal-text); background: var(--seal-soft); }
@media (max-width: 899px) {
  .lk-jump {
    justify-content: flex-start; scroll-behavior: smooth;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  }
  .lk-jump::-webkit-scrollbar { display: none; }
  /* Past the head it floats at the bottom of the screen, where a thumb is
     (lookup.js watchJump), and leaves when the head comes back. */
  .lk-jump.is-floating {
    position: fixed; z-index: 40; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); margin: 0;
    max-width: calc(100vw - 28px); background: color-mix(in srgb, var(--card) 92%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 14px 34px -14px rgba(26, 24, 19, .45);
    animation: lk-float-in .25s cubic-bezier(.2, .7, .3, 1);
  }
  @keyframes lk-float-in { from { opacity: 0; translate: -50% 16px; } }
  /* Above the app strip, when that is showing at the foot (site.js). */
  body:has(#appstrip:not([hidden])) .lk-jump.is-floating { bottom: calc(86px + env(safe-area-inset-bottom)); }
}
@media (min-width: 900px) {
  .lk-jump { position: sticky; z-index: 20; top: calc(var(--pad) + var(--bar-h) + 10px); box-shadow: 0 10px 30px -18px rgba(26, 24, 19, .35); }
}

/* The stroke order as frames, the stroke being written in the seal colour. */
.lk-order { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 10px; }
.lk-order li { position: relative; aspect-ratio: 1; border: 1px solid var(--hair); border-radius: 10px; background: var(--card); }
.lk-order svg { position: absolute; inset: 8%; width: 84%; height: 84%; }
.lk-order .o-done { fill: var(--fg); }
.lk-order .o-now { fill: var(--seal); }
.lk-order .o-next { fill: color-mix(in srgb, var(--fg) 9%, transparent); }
.lk-order span { position: absolute; left: 6px; top: 4px; color: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.lk-sec-h {
  display: flex; align-items: center; gap: 12px; margin: 0 0 20px;
  font-family: 'Fraunces', serif; font-size: clamp(22px, 2.4vw, 27px); font-weight: 500; letter-spacing: -.01em; color: var(--fg);
}
.lk-sec-g {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--seal-soft); color: var(--seal-text);
  font-family: 'Noto Serif SC', serif; font-size: 18px; font-weight: 600; line-height: 1;
}
.lk-results-h + .lk-sec { margin-top: 28px; }
.lk-usage { margin: 0; padding-left: 18px; display: grid; gap: 10px; line-height: 1.6; }
.lk-ex { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.lk-ex li { display: flex; flex-direction: column; gap: 3px; }
.lk-ex-h { font-family: 'Noto Serif SC', serif; font-size: 21px; }
.lk-ex-h mark { background: none; color: var(--seal-text); }
.lk-ex-p { color: var(--fg-2); font-size: var(--fs-fine); }
.lk-ex-e { font-size: var(--fs-small); }

/* A table of words: one line each, a hairline between. */
.lk-table { list-style: none; margin: 0; padding: 0; }
.lk-table li + li { border-top: 1px solid var(--hair); }
.lk-table li[hidden] { display: none; }
/* The columns are fixed, so the pinyin and the meaning start in the same
   place on every row whatever the word's length (owner, 2026-10-06). */
.lk-t-row {
  display: grid; grid-template-columns: 6.6em 10em minmax(0, 1fr) auto; align-items: baseline; gap: 16px;
  padding: 11px 4px; color: var(--fg); text-decoration: none;
}
.lk-t-h, .lk-t-py { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-t-row:hover .lk-t-h { color: var(--seal-text); }
.lk-t-h { font-family: 'Noto Serif SC', serif; font-size: 22px; line-height: 1.2; }
.lk-t-py { color: var(--fg-2); font-size: var(--fs-small); }
.lk-t-m { font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-t-l { color: var(--muted); font-size: 12px; white-space: nowrap; }
.lk-t-open {
  margin-top: 6px; padding: 10px 4px; border: 0; border-top: 1px solid var(--hair); width: 100%; text-align: left;
  background: none; color: var(--seal-text); font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer;
}
.lk-t-open:hover { text-decoration: underline; text-underline-offset: 3px; }
.lk-t-beyond { margin: 8px 4px 0; color: var(--muted); font-size: var(--fs-fine); }
.lk-t-beyond[hidden] { display: none; }

/* The characters this one builds: the characters themselves, small meaning under. */
.lk-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 18px 8px; }
.lk-grid a { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--fg); text-decoration: none; }
.lk-grid .hz { font-family: 'Noto Serif SC', serif; font-size: 30px; line-height: 1; }
.lk-grid a:hover .hz { color: var(--seal-text); }
.lk-grid-m { max-width: 100%; color: var(--fg-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A word's characters, side by side, a hairline between. */
.lk-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.lk-part { padding: 0 20px 8px; }
.lk-part + .lk-part { border-left: 1px solid var(--hair); }
.lk-part-h { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-bottom: 16px; color: var(--fg); text-decoration: none; }
.lk-part-h .hz { font-family: 'Noto Serif SC', serif; font-size: 30px; }
.lk-part-h:hover .hz { color: var(--seal-text); }
.lk-part-m { color: var(--fg-2); font-size: var(--fs-small); }
.lk-part-solo { padding-top: 4px; }

/* The way in: an ink card, the seal, and two ways on. */
.lk-cta {
  margin-top: 80px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px 26px;
  padding: 28px 30px; border-radius: 24px; color: #ECE6D8;
  background: radial-gradient(60% 120% at 0% 0%, rgba(200, 69, 46, .22), transparent 70%), #16130F;
  box-shadow: 0 30px 60px -36px rgba(26, 24, 19, .6);
}
.lk-cta-seal { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 14px; background: var(--seal); color: #FFF4E8; transform: rotate(-4deg); box-shadow: inset 0 0 0 1.5px rgba(255, 244, 232, .3); }
.lk-cta-seal span { font-family: 'Noto Serif SC', serif; font-size: 20px; font-weight: 600; line-height: 1.02; text-align: center; }
.lk-cta-h { margin: 0; font-family: 'Fraunces', serif; font-size: clamp(24px, 2.6vw, 32px); font-weight: 500; line-height: 1.15; }
.lk-cta-sub { margin: 6px 0 0; color: #A39B8B; font-size: var(--fs-small); line-height: 1.5; max-width: 46ch; }
.lk-cta-go { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lk-cta-ios { color: #ECE6D8; font-size: var(--fs-fine); text-decoration: none; border-bottom: 1px solid rgba(236, 230, 216, .25); }
.lk-cta-ios:hover { border-bottom-color: currentColor; }
@media (max-width: 720px) {
  .lk-cta { grid-template-columns: auto 1fr; }
  .lk-cta-go { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; gap: 18px; }
}
.lk-rights { margin: 36px auto 0; max-width: 64ch; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.6; }

/* THE GUSHI STORY: the one card on the page, and the seal on it. 故事 is
   both the word for story and the name, so the chop from the nav sits at its
   corner, and the two characters again, large and faint, behind the text. */
.lk-story {
  position: relative; overflow: hidden; margin: 0; padding: 26px 30px 28px;
  border: 1px solid color-mix(in srgb, var(--seal) 22%, var(--hair)); border-radius: 22px;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--seal) 7%, transparent), transparent 60%),
    var(--card);
  box-shadow: 0 1px 2px rgba(26, 24, 19, .04), 0 22px 48px -30px rgba(120, 40, 20, .35);
}
.lk-story::after {
  content: '故事'; position: absolute; right: 18px; bottom: -26px; z-index: 0; pointer-events: none;
  font-family: 'Noto Serif SC', serif; font-weight: 700; font-size: 112px; line-height: 1;
  color: color-mix(in srgb, var(--seal) 7%, transparent); letter-spacing: -.04em;
}
.lk-story figcaption { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.lk-story-seal {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px;
  background: var(--seal); color: #FFF8EE; transform: rotate(-4deg);
  box-shadow: inset 0 0 0 1.5px rgba(255, 248, 238, .3);
}
.lk-story-seal span { font-family: 'Noto Serif SC', serif; font-size: 12px; font-weight: 600; line-height: 1.02; text-align: center; }
.lk-story-k { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--seal-text); }
.lk-story .story { position: relative; z-index: 1; padding: 0; border: 0; max-width: 60ch; }
.lk-story .story p { margin: 0; font-family: 'Fraunces', serif; font-size: 21px; line-height: 1.55; color: var(--fg); }
.lk-story .story p + p { margin-top: 10px; }

/* The history and the tones, as the learn host draws them, on paper. */
.lookup-page .story p { margin: 0; line-height: 1.65; }
.lookup-page .hl-meaning, .lookup-page .hl-block, .lookup-page .hl-sound { font-weight: 600; border-radius: 3px; padding: 0 2px; }
.lookup-page .hl-meaning { background: color-mix(in srgb, var(--amber) 20%, transparent); }
.lookup-page .hl-block { background: color-mix(in srgb, var(--violet) 18%, transparent); }
.lookup-page .hl-sound { background: color-mix(in srgb, var(--rose) 20%, transparent); }
.lookup-page .etym { display: flex; flex-wrap: wrap; gap: 18px; }
.lookup-page .etym-c { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lookup-page .etym-art { width: 84px; height: 84px; display: grid; place-items: center; border: 1px solid var(--hair); }
.lookup-page .etym-art svg { width: 66px; height: 66px; fill: var(--fg); }
.lookup-page .etym-now { font-family: 'Noto Serif SC', serif; font-size: 50px; line-height: 1; }
.lookup-page .etym-c figcaption { display: flex; flex-direction: column; align-items: center; font-size: 12px; color: var(--fg-2); }
.lookup-page .etym-zh { font-family: 'Noto Serif SC', serif; font-size: 14px; color: var(--fg); }
.lookup-page .origin { margin: 20px 0 0; max-width: 62ch; line-height: 1.65; }
.lookup-page .fine { color: var(--fg-2); font-size: var(--fs-fine); }
.lookup-page .t1 { color: var(--t1); } .lookup-page .t2 { color: var(--t2); } .lookup-page .t3 { color: var(--t3); }
.lookup-page .t4 { color: var(--t4); } .lookup-page .t5 { color: var(--t5); }
.lookup-page .tree-role { margin-left: 0; padding: 0 7px; border-radius: 99px; background: var(--raised); color: var(--fg-2); font-size: 11px; }
.lookup-page .bt-story { margin-top: 28px; }

@media (max-width: 640px) {
  .lk { padding: 40px 18px 56px; }
  .lk-glyph { width: 168px; height: 168px; }
  .lk-glyph svg { width: 144px; height: 144px; }
  .lk-glyph-sm { width: 112px; height: 112px; }
  .lk-glyph-sm svg { width: 96px; height: 96px; }
  .lk-m { font-size: 30px; }
  .lk-t-row { grid-template-columns: auto 1fr auto; gap: 2px 12px; padding: 12px 2px; }
  .lk-t-m { grid-column: 1 / -1; white-space: normal; }
  .lk-t-l { grid-column: 3; grid-row: 1; }
  .lk-part + .lk-part { border-left: 0; border-top: 1px solid var(--hair); padding-top: 24px; }
}