/* Kamus Tubuh (/kamus/). Kept out of base.css on purpose.
   Type is Poppins, the same face the landing page's body uses; the self-hosted
   subset "Kamus" is only the tail of the stack, for the kanji it has no glyph for.
   Glyph SVGs are all viewBox 0 0 200 200 and are sized by the box they sit in. */

.kamus {
  --paper: #fdfcfb;
  --graphite: #1a1a1a; /* the landing page's body colour (--ink-100) */
  --soft: #6e6862;
  --hair: #e2dcd5;
  --wine: #8f2c40;
  background: var(--paper);
  color: var(--graphite);
  /* Poppins draws the Latin, the same face the landing page's body uses
     (.pillar__benefit is poppins-regular). Poppins carries no kanji, so
     天 大 手 又 fall through to "Kamus", the self-hosted subset, and are
     drawn in mincho: intended. The middle of the stack is the landing
     page's own body stack (style.css --font-sans). Type matches
     .pillar__benefit: 1rem / 1.7 / 400 / #1A1A1A. */
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji", "Kamus", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
.kamus a { color: inherit; text-decoration: none; }
.kamus p, .kamus h1, .kamus h2, .kamus ul, .kamus figure { margin: 0; }
.kamus h1, .kamus h2 { font-weight: 400; }
.kamus .vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------------------------------------------------------- index */

/* One indent step. From 1200px it is a part's glyph (40px) and a 56px gutter,
   96px, so the levels still read as levels in a wide column; 48px (the glyph
   and 8px) between 768 and 1200; 24px under 768, where deep indents would eat
   the reading space. Every level of the tree and its vertical rule read this,
   so these values move all of them at once. The first indent, from the region
   heading to the part rows, is 30% shorter than a step: 67px, 34px, 17px. */
.kamus { --kamus-step: 48px; --kamus-first: 34px; }
@media (min-width: 1200px) { .kamus { --kamus-step: 96px; --kamus-first: 67px; } }
@media (max-width: 767px) { .kamus { --kamus-step: 24px; --kamus-first: 17px; } }

/* The dictionary's own container, wider than the landing page's 1080px so a
   wide screen holds the figure and a long table side by side: up to 1600px of
   content, centred, with the side padding outside it (1rem, 1.5rem from 768px)
   as on the landing page. Every block inside starts at the container's left
   edge, so the left edges line up. /alat uses the same container. */
.kamus-wrap {
  box-sizing: content-box;
  max-width: 1600px; margin-left: auto; margin-right: auto;
  padding: clamp(20px, 4vw, 56px) 1rem 90px;
}
@media (min-width: 768px) { .kamus-wrap { padding-left: 1.5rem; padding-right: 1.5rem; } }
/* The lines every page starts with: the title, one instruction line and the
   small link to the about page. The title takes the landing page's section-h2
   step (1.5rem, 1.9rem from 768px). */
.page-title { margin: 0 0 2px; }
/* The page's opening heading, whether it is the h1 or has stood down to a
   plain line on a page that names itself further down. Both carry .rt, whose
   own .id rule further down this file sets 15px; naming both classes here
   outweighs it, so the size holds wherever the rule happens to sit. */
.rt.page-title .id { font-size: 1.5rem; line-height: 1.3; }
@media (min-width: 768px) { .rt.page-title .id { font-size: 1.9rem; } }
.back-alat { margin: 0 0 2px; font-size: 13px; color: var(--soft); }
.back-alat a:hover, .back-alat a:focus-visible { color: var(--wine); }
.subtitle { margin: -4px 0 6px; font-size: 13px; color: var(--soft); }
.instr { margin: 0; font-size: 14px; color: var(--soft); }
.about-link { margin: 2px 0 22px; font-size: 13px; color: var(--soft); }
.about-link a:hover, .about-link a:focus-visible { color: var(--wine); }
.about {
  max-width: 900px; margin: 56px 0 0; padding-top: 32px; border-top: 1px solid var(--hair);
  font-size: 1rem; line-height: 1.7;
}
.about h1, .about h2 { font-size: 20px; color: var(--graphite); margin: 34px 0 10px; }
.about h1:first-child, .about h2:first-child { margin-top: 0; }
.about h3 { font-size: 17px; font-weight: 500; color: var(--graphite); margin: 26px 0 8px; }
.about p + p, .about ul + p { margin-top: .9em; }
.about p + ul { margin-top: .6em; }
.about__lead { font-weight: 500; }
.about ul { margin: 0; padding-left: 1.2em; }
.about li + li { margin-top: .4em; }
.about a { color: var(--wine); }

/* Two columns, the same on every page: the top lines and the callout on the
   left, what the page is about on the right, both starting at the same top
   (level with "← Alat belajar").
   The left column is fixed and stays put while the right one scrolls, so
   moving between parts only swaps the right column. Under 900px they stack. */
/* The top lines stay where they stood above the columns; the 10px that used
   to open the columns now sits between the about link and the figure. */
.kamus-left .callout { margin-top: 10px; }
.kamus-right { min-width: 0; }
@media (min-width: 900px) {
  /* The figure column is fixed at what the body's names need at 15px beside
     a 136x340 figure; the page's own content takes the rest. */
  .kamus-two { display: grid; grid-template-columns: 540px minmax(0, 1fr); gap: 40px; align-items: start; }
  /* The way back sits on a row of its own across both columns, so the two
     headings below it start together however tall it is. */
  .kamus-two > .back-alat { grid-column: 1 / -1; margin-bottom: 0; }
  .kamus-left { position: sticky; top: 80px; }
}
/* From 1100px the two columns split the page in half: the dictionary on the
   right is the main thing and is never the narrower one. */
@media (min-width: 1100px) {
  .kamus-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .kamus-right:not(:empty) { margin-top: 28px; }
}
/* Beside the callout the right column is narrow until about 1090px (272px at
   900): the entry's evolution strip takes its small frames there and wraps
   onto a second row when four do not fit. */
@media (min-width: 900px) and (max-width: 1091px) {
  .kamus-right .kd-chain { --fr: 72px; gap: 10px; flex-wrap: wrap; justify-content: flex-start; }
}

/* The callout: the scene's figure with its parts named beside it. The drawing
   is a picture, not a target; the names are the links, one line each: the
   name in the link colour and the number of kanji in small grey.
   Under 900px the names stand in two columns either side of the figure, each
   a 44px tap target, with no lines. */
.callout {
  --lead: 14px;
  display: grid; gap: 10px; align-items: stretch;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.callout__fig { grid-column: 2; grid-row: 1; align-self: center; }
.callout__fig img {
  display: block; width: var(--fig-w); height: var(--fig-h);
  filter: contrast(1.04);
}
.callout__col {
  list-style: none; margin: 0; padding: 0; grid-row: 1;
  display: flex; flex-direction: column; justify-content: space-between;
}
.callout__col--left { grid-column: 1; }
.callout__col--right { grid-column: 3; justify-content: space-around; }
.callout__l {
  display: flex; align-items: center; min-height: 44px; font-size: 15px; line-height: 1.3;
  color: var(--color-primary-color-sk, #8f2c40); -webkit-tap-highlight-color: transparent;
}
.callout__col--left .callout__l { justify-content: flex-end; text-align: right; }
.callout__n { margin-left: .45em; font-size: 13px; color: var(--soft); }
/* Underline marks the page being read and nothing else. A hovered or focused
   name changes colour instead: after a click the pointer still rests on a
   name (the left column is the same on every page), and on a phone a tapped
   name keeps its hover state, so an underline there read as a second
   "current". */
a.callout__l[href]:hover, a.callout__l[href]:focus-visible { color: var(--graphite); }
a.callout__l[href]:focus-visible { outline: 1.5px solid var(--wine); outline-offset: 2px; }
.callout__l--current { color: var(--graphite); }
.callout__l--current .callout__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.callout__l--soon { color: var(--soft); opacity: .55; }
/* A wide picture (the landscape) takes the full width on top on a narrow
   screen, and its names stand in two columns under it. */
.callout--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.callout--wide .callout__fig { grid-column: 1 / -1; }
.callout--wide .callout__fig img { width: 100%; height: auto; }
.callout--wide .callout__col { grid-row: 2; }
.callout--wide .callout__col--right { grid-column: 2; }
/* 900px and up: the figure is centred at its fixed size, and each name sits
   at its own height (--y, a fraction of the figure) with a short level line
   running to the figure's edge. */
@media (min-width: 900px) {
  .callout, .callout--wide { display: block; position: relative; height: var(--fig-h); }
  .callout__fig { position: absolute; top: 0; left: var(--fig-x); width: var(--fig-w); transform: translateX(-50%); }
  .callout__fig img, .callout--wide .callout__fig img { width: var(--fig-w); height: var(--fig-h); }
  .callout__col { position: absolute; inset: 0; display: block; pointer-events: none; }
  .callout__col li { position: absolute; top: var(--y); transform: translateY(-50%); white-space: nowrap; pointer-events: auto; }
  .callout__col--left li { right: calc(100% - var(--fig-x) + var(--fig-w) / 2 + var(--lead)); }
  .callout__col--right li { left: calc(var(--fig-x) + var(--fig-w) / 2 + var(--lead)); }
  .callout__l { display: inline-block; min-height: 0; }
  .callout__col li::after {
    content: ""; position: absolute; top: 50%; width: calc(var(--lead) - 4px);
    border-top: 1px solid rgba(110, 104, 98, .45);
  }
  .callout__col--left li::after { left: calc(100% + 4px); }
  .callout__col--right li::after { right: calc(100% + 4px); }
  /* A scene with long names lets them break onto a second line rather than
     shrinking the figure: each side's names get the room between the
     column's edge and the figure's, less the level line. */
  .callout--wrap .callout__col li { white-space: normal; line-height: 1.25; }
  .callout--wrap .callout__col--left li { max-width: calc(var(--fig-x) - var(--fig-w) / 2 - var(--lead)); }
  .callout--wrap .callout__col--right li { max-width: calc(100% - var(--fig-x) - var(--fig-w) / 2 - var(--lead)); }
  /* A name whose anchor is at the foot of the picture, nearer the middle than
     either side, sits under the figure instead: centred on its anchor's x
     (--x, a fraction of the figure's width), one line, with its leader
     running straight up to the figure's edge. The block keeps a line of
     room under the figure for it. */
  .callout--below { padding-bottom: calc(var(--lead) + 20px); }
  .callout__col li.callout__b {
    top: auto; bottom: 0; right: auto; left: calc(var(--fig-x) - var(--fig-w) / 2 + var(--x) * var(--fig-w));
    transform: translateX(-50%); max-width: none; white-space: nowrap; text-align: center;
  }
  .callout__col li.callout__b::after {
    top: auto; bottom: calc(100% + 4px); left: 50%; right: auto;
    width: 0; height: calc(var(--lead) - 4px); border-top: 0; border-left: 1px solid rgba(110, 104, 98, .45);
  }
}

.rt { display: flex; align-items: baseline; gap: .6em; margin: 0 0 4px; }
/* The region heading is its Indonesian name only, on the landing page's
   section-h2 step (1.5rem, 1.9rem from 768px); no glyph sets its height. */
.rt .id { font-size: 15px; }
/* The right column's name is the same size as the left's, and takes its line
   height too, so the two headings sitting on one grid row read level. */
.kamus-right h1.rt .id, .kamus-right h2.rt .id { font-size: 1.5rem; line-height: 1.3; }
@media (min-width: 768px) { .kamus-right h1.rt .id, .kamus-right h2.rt .id { font-size: 1.9rem; } }
/* Right-column text is the landing page's body text (.pillar__benefit), and
   none of it carries a measure of its own: the region note, the set labels,
   a row's meaning and note and the entry body all run to the column's right
   edge, the same edge as the row rules. */
.rnote { margin: 0 0 26px; font-size: 1rem; line-height: 1.7; color: var(--graphite); }
/* A set's label stands with the part rows it heads, at the first indent. */
.setlabel { font-size: 13px; color: var(--soft); font-style: italic; margin: 26px 0 2px; padding-left: var(--kamus-first); }
.setlabel:first-of-type { margin-top: 0; }

/* Levels by indent, one step each: the region heading and its note sit at
   the column's left edge, the parts at the first indent (67px on a desktop),
   and each level under them one full step further (96px). A
   part row gets 8px more above it than a child row, so each part opens a new
   group. The selectors carry the element name because the reset below
   ("ul.tree ul") would otherwise win on specificity and flatten it again. */
ul.tree, ul.tree ul { list-style: none; margin: 0; padding: 0; }
ul.tree { margin-left: var(--kamus-first); }
ul.tree > li > .row { padding-left: 0; padding-top: 21px; }
ul.tree > li { border-top: 1px solid var(--hair); }
ul.tree > li:last-child { border-bottom: 1px solid var(--hair); }
.row {
  display: flex; gap: 14px; align-items: baseline; padding: 13px 0;
}
.txt { flex: 1; min-width: 0; }
/* Meaning and expander on one line, so both sit next to the glyph. */
.mline { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.row .g { line-height: 1; color: inherit; transition: color .16s ease; }
.row a.g:hover, .row a.g:focus-visible { color: var(--wine); }
.row a.g:focus-visible { outline: 1.5px solid var(--wine); outline-offset: 3px; }
.row .g.soon { color: var(--soft); opacity: .55; }
.txt .m { font-size: 1rem; line-height: 1.7; }
.txt .n { display: block; font-size: 1rem; line-height: 1.7; margin-top: 3px; }
/* It opens the children in place, so it has to read as something you can
   press: the site's link colour, a touch heavier, underlined on hover. */
.more {
  border: 0; background: transparent; padding: 6px 0 6px 10px; cursor: pointer; color: var(--wine);
  font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.more:hover { color: var(--wine); text-decoration: underline; }
.more .cv { display: inline-block; margin-left: 5px; transition: transform .2s ease; }
/* The chevron points down when closed and up when open: half a turn apart.
   It stays the "›" the subset font carries; U+2304 is not in it. */
.more .cv { transform: rotate(90deg); }

/* What opens a row is a checkbox, not a script: every row of the tree is in
   the HTML from the start (a crawler that skips the script has to find the
   whole dictionary), and pressing the label only switches display. The input
   itself is off-screen but still reachable by keyboard. */
.tgl {
  position: absolute; appearance: none; -webkit-appearance: none;
  width: 0; height: 0; margin: 0; padding: 0; border: 0; opacity: 0;
}
ul.tree .tgl ~ .kids { display: none; }
ul.tree .tgl:checked ~ .kids { display: block; }
.tgl:checked ~ .row .more .cv { transform: rotate(270deg); }
/* A row named in the URL fragment (/kamus/tangan#又, the entry page's way
   back) opens by itself, and so does every row above it, so the reader lands
   on it with its children showing. Still no script: :target and :has. On such
   a row the checkbox works the other way round, so it can still be closed.
   base.css already keeps a landing clear of the 64px header; 16px more puts
   the row at 80px, level with the sticky figure column. */
ul.tree li { scroll-margin-top: 16px; }
ul.tree li:is(:target, :has(li:target)) > .tgl ~ .kids { display: block; }
ul.tree li:is(:target, :has(li:target)) > .tgl:checked ~ .kids { display: none; }
ul.tree li:is(:target, :has(li:target)) > .tgl ~ .row .more .cv { transform: rotate(270deg); }
ul.tree li:is(:target, :has(li:target)) > .tgl:checked ~ .row .more .cv { transform: rotate(90deg); }
.tgl:focus-visible ~ .row .more { text-decoration: underline; outline: 1.5px solid var(--wine); outline-offset: 2px; }
/* A child list is one step in: its thin rule stands under the parent's glyph
   (half the step, but never past 24px, so at the 96px step it does not drift
   out past the glyph), and the rest of the step, less the rule's 1px, comes
   after it. The step is on the list, not on its rows, so a list inside a list
   starts from where its parent's glyph starts and each level lands exactly one
   step further in. Inside a row the note sits under the meaning, not under
   the glyph. */
ul.tree .kids {
  --kamus-rule: min(var(--kamus-step) / 2, 24px);
  margin-left: var(--kamus-rule); padding-left: calc(var(--kamus-step) - var(--kamus-rule) - 1px);
  border-left: 1px solid var(--hair);
}
ul.tree .kids > li > .row { padding-left: 0; }
.kids > li + li { border-top: 1px solid var(--hair); }
/* Glyph sizes by depth, on the landing page's heading steps: 2.5rem (its h1),
   1.9rem (section h2), 1.5rem (section h2 on a phone). */
.d0 .g { font-size: 2.5rem; } .d1 .g { font-size: 1.9rem; } .d2 .g { font-size: 1.5rem; } .d3 .g { font-size: 1.5rem; }

/* Region page rows. The indent, the sizes and the rules are the tree's; only
   what a row carries is new. */
.row--quiet { color: var(--soft); }
/* The old form after the slash is the same character as the new one and is
   set at the same size, only fainter; the slash stays small between them. */
.kyuuji { color: var(--soft); line-height: 1; }
.d0 .kyuuji { font-size: 2.5rem; } .d1 .kyuuji { font-size: 1.9rem; } .d2 .kyuuji, .d3 .kyuuji { font-size: 1.5rem; }
.kyuuji__sep { margin: 0 .25em; font-size: .5em; vertical-align: .15em; }
.rbadge {
  border: 1px solid var(--hair); border-radius: 999px; padding: 1px 8px;
  color: var(--soft); font-size: 10.5px; letter-spacing: .08em; white-space: nowrap;
}
.reading { color: var(--soft); font-size: 13px; }
.rtag { color: var(--soft); font-size: 11px; font-style: italic; white-space: nowrap; }

.empty { color: var(--soft); font-style: italic; max-width: 32ch; }
p.soon { color: var(--soft); font-style: italic; }

/* ---------------------------------------------------------------- entry */

/* The entry sits in the right column under the top block and takes its full
   width, like the region page's text. */
.kd-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--hair); padding-bottom: 12px; margin-bottom: 22px; font-size: 14px;
}
.kd-backs { display: flex; flex-direction: column; }
.kd-back { color: var(--wine) !important; font-size: 15px; }
.kd-badge {
  border: 1px solid var(--hair); border-radius: 999px; padding: 3px 12px;
  color: var(--soft); font-size: 11.5px; letter-spacing: .08em;
}

/* The head is one centred row: the character, then its old form after a
   slash, as in a tree row. It starts at the text's own left edge, as the
   readings, the meaning and every section under it do: a centred glyph over
   left-aligned prose made the eye cross the page to find where to begin. */
.kd-glyph { display: flex; align-items: center; margin: 6px 0 2px; line-height: 1.1; }
.kd-glyph__im { display: block; width: clamp(96px, 26vw, 128px); height: clamp(96px, 26vw, 128px); flex: none; }
.kd-glyph__im svg { display: block; width: 100%; height: 100%; }
.kd-glyph__txt { font-size: clamp(64px, 16vw, 96px); }
/* The old form after the slash is set at the same size as the new one, only
   fainter. Beside a drawn glyph that means 90% of the drawing's box: the
   drawing sets its 1000-unit em at 180 of the box's 200 units. */
.kd-kyuuji { font-size: clamp(64px, 16vw, 96px); color: var(--soft); white-space: nowrap; }
.kd-glyph__im + .vh + .kd-kyuuji { font-size: clamp(86px, 23.4vw, 115px); }
.kd-kyuuji__sep { margin: 0 .25em; font-size: .5em; vertical-align: .15em; }
/* "Di mana": one line per place the character is filed under. The steps read
   as a path, so only the separators are grey and the last step, the character
   itself, is not a link. */
.kd-where { font-size: 15px; line-height: 1.7; margin: 0 0 2px; }
.kd-where a { color: var(--wine); }
.kd-where a:hover, .kd-where a:focus-visible { text-decoration: underline; }
.kd-sep { color: var(--soft); }
.kd-here { color: var(--graphite); }
/* The example sentence: the dictionary's body text, the character itself the
   only thing set heavier, and the work it comes from small and grey under it. */
.kd-ex { font-size: 1rem; line-height: 1.9; margin: 0; }
.kd-ex b { font-weight: 600; }
.kd-ex__src { font-size: 13px; color: var(--soft); margin: 2px 0 0; }
/* The sentences stack: each one is its own block, so a line of air separates
   a source line from the sentence under it. */
.kd-ex__src + .kd-ex { margin-top: 14px; }
.kd-par { font-size: 13px; margin-bottom: 12px; }
.kd-par a, .kd-cross a { color: var(--wine); }
.kd-dim { color: var(--soft); opacity: .6; }
.kd-intro { font-size: 16px; line-height: 1.7; margin: 0 0 20px; }
/* The members' part of an entry (evolution strip and long notes). The HTML is
   whole for everyone, for search engines; until session-header.js finds a
   subscriber and adds .kd-premium--open, nothing of it is drawn: the block is
   collapsed to no height rather than removed, so it stays in the page. The
   member line from access.json sits just after the block and shows only
   while the block is closed. */
.kd-premium:not(.kd-premium--open) { max-height: 0; overflow: hidden; }
.kd-premium-lock { margin: 18px 0 0; font-size: 14px; color: var(--soft); }
.kd-premium--open + .kd-premium-lock { display: none; }

/* Evolution strip. Every frame is the same fixed box whatever the entry has
   (three stages or four), so the chain reads as one row at one size. Four
   frames fit a 360px screen. */
.kd-chain {
  --fr: 72px;
  display: flex; flex-wrap: nowrap; justify-content: center; align-items: flex-start;
  gap: 10px; margin-bottom: 10px;
}
@media (min-width: 480px) { .kd-chain { --fr: 104px; gap: 16px; } }
.kd-fr { flex: 0 0 var(--fr); width: var(--fr); text-align: center; }
.kd-fr .im { width: var(--fr); height: var(--fr); margin: 0 auto; }
.kd-fr .im svg { display: block; width: 100%; height: 100%; }
.kd-fr .st { font-size: 10px; letter-spacing: .1em; color: var(--soft); margin-top: 4px; }
.kd-fr figcaption { font-size: 10.5px; color: var(--soft); line-height: 1.45; margin-top: 3px; overflow-wrap: anywhere; }

.kd-cross {
  background: rgba(58, 55, 51, .06); border-left: 3px solid var(--hair);
  padding: 10px 13px; margin: 14px 0; font-size: 14px;
}
/* A section heading opens with a clear line of the body text above it --
   1rem at line-height 1.7, the measure .kd-p is set in -- so the sections read
   as sections rather than as one column of text with small grey labels in it.
   Every heading takes it, the first one under the glyph included: an exception
   there would leave the page's first break the tightest of them all.

   The selector carries .kamus because .kamus h2 up at the top resets every
   h2's margin to 0 and, being a class and an element, outranked a lone class:
   the spacing set here did nothing at all until the two were even. The index
   carries .kamus on its own heading rule for the same reason, so its stroke
   headings keep their own spacing rather than taking this one. */
.kamus .kd-h { font-size: 11.5px; letter-spacing: .1em; color: var(--soft); margin: 1.7rem 0 5px; }
.kd-p { font-size: 1rem; line-height: 1.7; }
.kd-ed { font-style: italic; }

.kd-kids { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.kd-kid {
  font-size: 22px; line-height: 1.3; border: 1px solid var(--hair); border-radius: 8px;
  padding: 5px 12px; color: inherit;
}
a.kd-kid:hover, a.kd-kid:focus-visible { color: var(--wine); border-color: var(--wine); }
.kd-cta {
  display: block; border-top: 1px solid var(--hair); margin-top: 26px; padding-top: 14px;
  font-size: 14px;
}
.kd-cta b { color: var(--wine); font-weight: inherit; }

@media (prefers-reduced-motion: reduce) { .kamus * { transition: none !important; } }

/* ---------------------------------------------------------------- alat */

/* The tool box (/alat). The dictionary's type, rules and greys; no colours of
   its own. An open tool is one link across its row, a closed one is faint. */
.alat__h1 { font-size: clamp(26px, 5vw, 34px); line-height: 1.3; margin: 0 0 4px; }
.alat__lede { margin: 0 0 26px; font-size: 15px; color: var(--soft); max-width: 60ch; }
.alat__list { list-style: none; margin: 0; padding: 0; }
.alat__list > li { border-top: 1px solid var(--hair); }
.alat__list > li:last-child { border-bottom: 1px solid var(--hair); }
.alat__row { display: flex; align-items: center; gap: 18px; padding: 16px 0; min-height: 44px; }
.alat__thumb { flex: none; display: block; }
.alat__thumb img { display: block; height: auto; filter: contrast(1.04); }
/* The thumbnails grow with the screen, as the container does. */
.alat__thumb--tubuh img { width: clamp(48px, 5.6vw, 110px); }
.alat__thumb--pemandangan img,
.alat__thumb--makhluk img,
.alat__thumb--desa img,
.alat__thumb--ladang img,
.alat__thumb--alat img,
.alat__thumb--upacara img { width: clamp(120px, 15.6vw, 300px); }
.alat__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.alat__name { font-size: 17px; color: var(--graphite); }
.alat__meta { font-size: 14px; color: var(--soft); }
.alat__go { flex: none; font-size: 18px; color: var(--soft); }
a.alat__row:hover .alat__name, a.alat__row:focus-visible .alat__name { color: var(--wine); }
a.alat__row:hover .alat__go, a.alat__row:focus-visible .alat__go { color: var(--wine); }
a.alat__row:focus-visible { outline: 1.5px solid var(--wine); outline-offset: 2px; }
.alat__row--soon { opacity: .55; }
.alat__small .alat__row { padding: 10px 0; }
.alat__small .alat__name { font-size: 14px; }


/* ---------------------------------------------------------------- indeks */

/* The index page only. The kanji here are drawn with the subset we serve, so
   every reader sees the same Japanese shapes: elsewhere "Kamus" is the tail of
   the stack and a device's own CJK font, which may be a Chinese one, wins.
   Only the characters take it, not the page, because the subset carries Latin
   of its own (Newsreader) and the running text should stay as it is. */
.kd-idx__g { font-family: "Kamus", serif; }

.kd-idx__lede { font-size: 1rem; line-height: 1.7; color: var(--graphite); max-width: 42em; margin: 6px 0 26px; }
.kd-idx__h { margin: 34px 0 2px; }
.kd-idx__n { font-size: 13px; color: var(--soft); }
.kd-idx__note { font-size: 13px; color: var(--soft); margin: 0 0 10px; }

/* The stroke counts, as a row of links to the headings below. */
.kd-idx__toc {
  display: flex; flex-wrap: wrap; gap: 2px 4px;
  padding-bottom: 14px; border-bottom: 1px solid var(--hair); margin-bottom: 4px;
}
/* The counts are a list of places to jump to, not pages to page through, so
   they carry no frame: framed numbers in a row read as pagination, and did.
   The tap target stays 44px. */
.kd-idx__tocl { font-size: 13px; color: var(--soft); margin: 0 0 2px; }
.kd-idx__toc a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 6px;
  font-size: 14px; color: var(--wine);
}
.kd-idx__toc a:hover, .kd-idx__toc a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* Carries .kamus to match .kamus .kd-h, which these headings also wear: level
   with it, the later rule wins and the index keeps its own spacing. */
.kamus .kd-idx__sh { margin: 22px 0 6px; scroll-margin-top: 12px; }

/* The parts: the character and what it means, one per line on a phone. */
.kd-idx__parts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 2px; }
.kd-idx__parts a {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 2px 0; color: var(--graphite);
}
.kd-idx__parts .kd-idx__g { font-size: 1.5rem; line-height: 1.1; color: var(--wine); min-width: 1.8em; }
.kd-idx__m { font-size: 14px; color: var(--soft); }
.kd-idx__parts a:hover .kd-idx__m, .kd-idx__parts a:focus-visible .kd-idx__m { color: var(--graphite); }

/* Every character: the glyph alone, as many to the row as fit. */
.kd-idx__grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px; }
.kd-idx__grid a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  font-size: 1.5rem; line-height: 1; color: var(--graphite);
}
.kd-idx__grid a:hover, .kd-idx__grid a:focus-visible { color: var(--wine); }

@media (min-width: 700px) {
  .kd-idx__parts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 24px; }
}

/* The N5 roster: a card per character under the group it belongs to, five to
   a row at every width, so a group of fourteen reads as three rows however
   wide the screen is and the shape of a group stays the same on a phone as on
   a desk. The columns are equal fifths (minmax(0, 1fr)), which is what lets a
   meaning wider than its share be cut rather than push the row out.

   Sizes and colours are the index's: the glyph at its 1.5rem in the wine it
   uses for a part, the meaning at the 14px grey it puts beside one, the 2px
   gap and 44px target the index's own lists carry. The frame is --hair, the
   same line the index rules its headings with. Nothing here is a new number.

   The meaning is held to one line and cut with an ellipsis. A word that wraps
   would make one card taller than its neighbours and break the row. */
.kd-n5__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
.kd-n5__cell { min-width: 0; }
.kd-n5__card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 44px; padding: 10px 2px;
  border: 1px solid var(--hair); border-radius: 2px;
}
.kd-n5__g { font-family: "Kamus", serif; font-size: 1.5rem; line-height: 1.1; color: var(--wine); }
.kd-n5__m {
  max-width: 100%; font-size: 14px; line-height: 1.3; color: var(--soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kd-n5__card:hover, .kd-n5__card:focus-visible { border-color: var(--wine); }
.kd-n5__card:hover .kd-n5__m, .kd-n5__card:focus-visible .kd-n5__m { color: var(--graphite); }

/* A character's page is a single column: no figure beside it, so the text
   takes the about page's reading width rather than the container's full
   1600px. */
.kd-entry { max-width: 900px; }

/* The index sits under the ways back to the regions, in the same colour but
   without the arrow: it is not where this page was reached from, it is the
   other way in. */
.kd-back--indeks, .kd-back--n5 { align-self: flex-start; }

/* The two ways back stand side by side above the character, each a 44px
   target, and wrap onto their own lines on a narrow screen with room between
   them so neither is pressed by mistake. */
.kd-backs { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 20px; }
.kd-back { display: inline-flex; align-items: center; min-height: 44px; }