/* glossary pages: a reference dictionary. Shared tokens come from /css/site.css.
   Generated pages (build_glossary.py); edit this file, not the HTML. */

/* ---------- title ---------- */
.g-title { padding-block: clamp(36px, 5vw, 72px) var(--s-8); background: radial-gradient(60% 90% at 85% 0%, rgba(27, 94, 72, .18), transparent 70%), var(--canvas); }
.g-title__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6) clamp(24px, 5vw, 72px); align-items: end; }
.crumbs { font-size: var(--t-sm); font-weight: 700; color: var(--ink-mute); margin-block-end: var(--s-4); }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs span[aria-hidden] { margin-inline: 6px; color: var(--ink-mute); }
.g-title h1 { font-size: var(--t-3xl); font-weight: 800; line-height: 1.04; letter-spacing: -.024em; max-width: 13em; text-wrap: balance; }
.g-title .lede { margin-block-start: var(--s-5); font-size: var(--t-lg); line-height: 1.6; color: var(--ink-soft); max-width: 36em; text-wrap: pretty; }
.g-title .lede + p { margin-block-start: var(--s-3); color: var(--ink-mute); font-size: var(--t-sm); }
.g-title__av { inline-size: clamp(64px, 7vw, 92px); block-size: auto; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .45)); margin-block-end: calc(-1 * var(--s-8)); }

/* shelf: one tab per dictionary */
.shelf { margin-block-start: var(--s-7); border-block: 1px solid var(--line); }
.shelf ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s-6); }
.shelf a { display: inline-flex; align-items: baseline; gap: 6px; min-block-size: 44px; padding-block: 11px; color: var(--ink-mute); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; border-block-end: 2px solid transparent; margin-block-end: -1px; }
.shelf a:hover { color: var(--ink); }
.shelf a[aria-current="page"] { color: var(--ink); border-block-end-color: var(--accent); }
.shelf .n { font-variant-numeric: tabular-nums; color: var(--accent-2); font-weight: 800; font-size: 13.5px; }

/* ---------- hub: the six dictionaries as a list ---------- */
.g-shelfs { padding-block: var(--s-8) var(--s-9); }
.g-shelfs h2 { font-size: var(--t-xl); font-weight: 800; margin-block-end: var(--s-5); }
.books { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block-start: 1px solid var(--line); }
.books li { border-block-end: 1px solid var(--line); }
.books li:not(:nth-child(3n)) { border-inline-end: 1px solid var(--line); }
.books a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-4); padding: var(--s-6) var(--s-5); color: var(--ink); text-decoration: none; min-block-size: 112px; transition: background-color 160ms var(--ease-out); }
.books a:hover { background: rgba(190, 237, 217, .045); color: var(--ink); }
.books b { font-size: var(--t-lg); font-weight: 800; line-height: 1.25; }
.books small { display: block; margin-block-start: 4px; font-size: var(--t-sm); color: var(--ink-mute); font-weight: 400; }
.books .n { font-size: clamp(40px, 4.4vw, 60px); font-weight: 800; line-height: .84; letter-spacing: -.04em; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
@media (max-width: 899.98px) {
  .books { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .books li:not(:nth-child(3n)) { border-inline-end: 0; }
  .books li:nth-child(odd) { border-inline-end: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .books { grid-template-columns: minmax(0, 1fr); }
  .books li:nth-child(odd) { border-inline-end: 0; }
  .books a { min-block-size: 0; padding: var(--s-4) 0; align-items: center; }
  .books .n { font-size: 34px; }
}

/* ---------- the dictionary ---------- */
.lex { background: var(--ground-2); border-block-start: 1px solid var(--line); padding-block: var(--s-9) var(--s-10); }
.lex__head { margin-block-end: var(--s-7); max-width: 40em; }
.lex__head h2 { font-size: var(--t-2xl); font-weight: 800; line-height: 1.1; letter-spacing: var(--track-tight); }
.lex__head p { margin-block-start: var(--s-3); color: var(--ink-soft); }
.lex__grid { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 0 clamp(40px, 6vw, 96px); align-items: start; }
.lex__side { position: sticky; inset-block-start: 24px; align-self: start; display: grid; gap: var(--s-5); }

/* search: shown only when the script runs */
.find { display: none; }
.js .find { display: block; }
.find label { display: block; font-size: var(--t-sm); font-weight: 700; color: var(--accent-2); margin-block-end: var(--s-2); }
.find input { inline-size: 100%; min-block-size: 46px; padding: 10px 14px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--canvas); color: var(--ink); font: inherit; font-size: 16px; }
.find input::placeholder { color: var(--ink-mute); }
.find input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: transparent; }
.find__n { margin-block-start: var(--s-2); min-block-size: 1.4em; font-size: var(--t-xs); color: var(--ink-mute); }
.elsewhere { margin-block-start: var(--s-3); font-size: var(--t-sm); }
.elsewhere p { color: var(--ink-mute); font-size: var(--t-xs); margin-block-end: var(--s-1); }
.elsewhere ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.elsewhere a { display: block; padding-block: 5px; text-decoration: none; color: var(--ink-soft); line-height: 1.35; }
.elsewhere a:hover { color: var(--accent); }
.elsewhere a span { color: var(--ink-mute); font-size: var(--t-xs); }

/* thumb index */
.abc ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; }
.abc a { display: grid; place-items: center; min-block-size: 34px; border-radius: 8px; color: var(--ink-soft); font-weight: 800; font-size: 16px; text-decoration: none; transition: opacity 160ms var(--ease-out); }
.abc a:hover { background: rgba(190, 237, 217, .08); color: var(--accent); }
.abc a[aria-current="true"] { background: var(--accent); color: var(--accent-ink); }
.abc a.off { opacity: .22; pointer-events: none; }
.abc .wide { grid-column: span 2; font-size: 13.5px; }

/* letters and terms */
.letter { scroll-margin-block-start: 24px; }
.letter + .letter { margin-block-start: var(--s-9); }
.letter__h { display: flex; align-items: baseline; gap: var(--s-4); padding-block-end: var(--s-3); border-block-end: 1px solid var(--line-strong); }
.letter__h b { font-size: clamp(44px, 5vw, 68px); font-weight: 800; line-height: .9; letter-spacing: -.03em; color: var(--surface-2); -webkit-text-stroke: 1px var(--accent-2); unicode-bidi: isolate; }
.letter__h b::before { content: attr(data-l); } /* decoration (aria-hidden): the section is named by its aria-label */
.letter__h span { font-size: var(--t-sm); font-weight: 700; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.gl { margin: 0; }
.term { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: var(--s-1) var(--s-7); padding-block: var(--s-5); border-block-end: 1px solid var(--line); scroll-margin-block-start: 24px; position: relative; }
.term dt { grid-column: 1; grid-row: 1 / span 2; font-size: var(--t-lg); font-weight: 800; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.term dd { grid-column: 2; margin: 0; overflow-wrap: anywhere; }
.term .def { color: var(--ink-soft); white-space: pre-line; max-width: 40em; }
.term .learned { font-size: var(--t-sm); color: var(--ink-mute); line-height: 1.5; }
.term .learned a { color: var(--accent-2); }
.term .learned a:hover { color: var(--accent); }
.term .see { color: var(--ink-soft); }
.term:target::before { content: ""; position: absolute; inset-block: var(--s-4); inset-inline-start: calc(-1 * var(--s-5)); inline-size: 3px; border-radius: 2px; background: var(--accent); }
.term:target dt { color: var(--accent); }
.term[hidden], .letter[hidden] { display: none; }
.g-none { color: var(--ink-soft); padding-block: var(--s-6); }
.g-fine { margin-block-start: var(--s-8); font-size: var(--t-xs); color: var(--ink-mute); }

/* narrow: the search sits in the flow, the thumb index becomes a sticky strip */
@media (max-width: 999.98px) {
  .lex__grid { grid-template-columns: minmax(0, 1fr); }
  .lex__side { display: contents; }
  .find { margin-block-end: var(--s-5); }
  .abc { position: sticky; inset-block-start: 0; z-index: 12; margin-inline: calc(-1 * var(--gutter)); margin-block-end: var(--s-6); background: var(--veil-2); border-block: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .abc ol { display: flex; overflow-x: auto; gap: 2px; padding-inline: var(--gutter); padding-block: 4px; scrollbar-width: none; }
  .abc ol::-webkit-scrollbar { display: none; }
  .abc li { flex: 0 0 auto; }
  .abc a { min-inline-size: 38px; min-block-size: 40px; padding-inline: 6px; }
  .abc .wide { padding-inline: 10px; }
  .letter, .term { scroll-margin-block-start: 64px; }
  .term:target::before { inset-inline-start: calc(-1 * var(--s-3)); }
}
@media (max-width: 680px) {
  .term { grid-template-columns: minmax(0, 1fr); padding-block: var(--s-4); }
  .term dt { grid-row: auto; font-size: 18px; }
  .term dd { grid-column: 1; }
  .g-title__grid { grid-template-columns: minmax(0, 1fr) auto; }
  .g-title h1 { font-size: clamp(32px, 9vw, 44px); }
  .g-title__av { inline-size: 56px; }
  .shelf { margin-inline: calc(-1 * var(--gutter)); }
  .shelf ol { flex-wrap: nowrap; overflow-x: auto; padding-inline: var(--gutter); gap: 0 var(--s-5); scrollbar-width: none; }
  .shelf ol::-webkit-scrollbar { display: none; }
}

/* ---------- close ---------- */
.g-close .colophon__line { max-width: 18em; }