/* THE DICTIONARY wears the site's paper, ink and gold (/style.css) and sets
 * its entries the way a dictionary does: a headword, its senses in order of
 * weight, and cross references you can follow. */

.brand-sub { font-weight: 400; color: var(--graphite); }

.dict { padding-bottom: 120px; }

/* ---------------------------------------------------------------- looking a word up */
.dict-look { padding: 56px 0 0; }
.dict-look h1 { max-width: 12em; font-size: clamp(2.5rem, 5.6vw, 4.5rem); }
.dict-lead { margin-top: 24px; max-width: 33em; font-size: 1.25rem; line-height: 1.5; color: var(--ink-soft); }
.dict-form { max-width: 38rem; }
.dict-look.compact { padding-top: 24px; }
.dict-look.compact h1, .dict-look.compact .dict-lead { display: none; }
.dict-look.compact .dict-form { margin-top: 0; }
.suggest { max-width: 38rem; border: 1.5px solid var(--ink); border-top: 0; border-radius: 0 0 4px 4px; background: #fff; }
.suggest a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 18px; text-decoration: none; border-top: 1px solid var(--rule); }
.suggest li:first-child a { border-top: 0; }
.suggest a:hover, .suggest a:focus-visible { background: #f4f1e4; outline-offset: -2px; }
.suggest b { font: 500 1.1875rem/1.3 var(--display); }
.suggest span { font-size: 0.9375rem; color: var(--graphite); white-space: nowrap; }

/* ---------------------------------------------------------------- an entry */
.entry { padding-top: 64px; }
.headword { font-size: clamp(3rem, 10vw, 6.5rem); line-height: 0.98; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.entry-facts { margin-top: 22px; max-width: 36em; font-size: 1.1875rem; line-height: 1.5; color: var(--ink-soft); }
.entry-also { margin-top: 10px; font-size: 1rem; color: var(--graphite); }
.entry-also a { color: var(--ink); font-family: var(--display); font-weight: 500; }

.part { display: grid; gap: 14px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--rule); }
.part:first-of-type { border-top-color: var(--ink); }
.part h2 { font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.005em; }
.part-note { margin-top: 6px; max-width: 22em; font-size: 0.9375rem; line-height: 1.5; color: var(--graphite); }
.part-empty { max-width: 30em; color: var(--ink-soft); }
.part-empty a { color: var(--ink); }
@media (min-width: 860px) { .part { grid-template-columns: 4fr 8fr; column-gap: 72px; } }

/* senses: ranked by the stake behind them, so the numbers are a real order */
.senses { counter-reset: sense; }
.senses li { counter-increment: sense; display: grid; grid-template-columns: 1.8rem minmax(0, 12rem) 1fr 3.4em; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.senses li:first-child { padding-top: 0; }
.senses li::before { content: counter(sense); font: 600 1rem/1 var(--display); color: var(--foil-ink); }
.senses a { font: 600 1.375rem/1.2 var(--display); text-decoration-color: transparent; overflow-wrap: anywhere; }
.senses a:hover { text-decoration-color: var(--foil); }
.sense-track { display: block; height: 10px; }
.sense-bar { display: block; height: 100%; background: var(--bullion); box-shadow: inset 0 0 0 1px var(--foil); }
.sense-share { text-align: right; font-size: 1rem; font-weight: 500; }
.senses.small a { font-size: 1.125rem; font-weight: 500; }
@media (max-width: 560px) { .senses li { grid-template-columns: 1.5rem 1fr 3.4em; } .sense-track { display: none; } }

/* cross references: words set in a line, each one a way onward */
.refs-line { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.refs-line a { font: 500 1.25rem/1.4 var(--display); text-decoration-color: transparent; }
.refs-line a:hover { text-decoration-color: var(--foil); }

.entry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 56px; }
.entry-live { margin-top: 20px; font-size: 0.9375rem; color: var(--graphite); }

/* ---------------------------------------------------------------- the index, by first letter */
.index { margin-top: 88px; padding-top: 28px; border-top: 1px solid var(--ink); }
.entry:not([hidden]) ~ .index { margin-top: 104px; }
.index-title { font-size: 1.625rem; line-height: 1.2; letter-spacing: -0.008em; }
.index-note { margin-top: 8px; font-size: 1rem; color: var(--graphite); }
.letter { display: grid; grid-template-columns: 3.2rem 1fr; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.letter:first-child { margin-top: 24px; border-top: 1px solid var(--rule); }
.letter h3 { font-size: 1.625rem; line-height: 1.2; color: var(--foil-ink); }
.letter ul { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.letter a { font: 500 1.25rem/1.5 var(--display); text-decoration-color: transparent; }
.letter a:hover { text-decoration-color: var(--foil); }

@media (max-width: 620px) {
  .dict-look { padding-top: 28px; }
  .dict-lead { font-size: 1.125rem; }
  .entry { padding-top: 44px; }
  .part { margin-top: 40px; }
}