@font-face { font-family: "EB Garamond"; src: url(fonts/garamond.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url(fonts/garamond-italic.woff2) format("woff2"); font-style: italic; font-display: swap; }

/* One ink, one paper, one rubric red. */
:root {
  --paper: #fbfaf7;
  --ink: #1c1b19;
  --quiet: #8d8a84;
  --rule: #e9e6df;
  --rubric: #b3261e;
  --wash: rgba(179, 38, 30, 0.09);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 19px/1.45 "EB Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
::selection { background: var(--wash); }
::highlight(word) { text-decoration: underline; text-decoration-color: var(--rubric); text-decoration-thickness: 1px; }
:focus-visible { outline: 1px solid var(--rubric); outline-offset: 3px; }
mark { background: var(--wash); color: inherit; }

word-book { display: block; max-width: 74rem; margin: 0 auto; padding: 14px 32px 30vh; }

/* Small caps carry every label. */
h1, #status, .book, .label, .how, .tag, #more, .nearby, .try, .books dt {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
}

/* ---------- header ---------- */

h1 { margin: 0; font-size: 15px; font-weight: 400; letter-spacing: 0.14em; }
h1 a { color: var(--quiet); }
h1 a:hover { color: var(--ink); }
#q {
  width: 100%;
  padding: 4px 0 8px;
  font-size: 30px;
  line-height: 1.2;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
#q:focus { border-bottom-color: var(--ink); }
#q::placeholder { color: var(--quiet); font-style: italic; }
#q::-webkit-search-cancel-button { display: none; }
#status { margin: 6px 0 0; min-height: 1.5em; color: var(--quiet); font-size: 15px; }
#status.error { color: var(--rubric); }

/* Other matches run in a line, as guide words do. */
#more { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 10px; min-height: 1.5em; color: var(--quiet); font-size: 17px; }
#more a:hover, .nearby a:hover { color: var(--ink); }
#more a[aria-current] { color: var(--rubric); }

/* ---------- the spread: the dictionary on the left page, the thesauruses on the right ---------- */

#page { display: grid; grid-template-columns: minmax(0, 35em) minmax(0, 25em); gap: 0 5rem; margin-top: 26px; }
#page > * { min-width: 0; }
#page > .whole { grid-column: 1 / -1; max-width: 44em; }

.word { margin: 0 0 22px; font-size: 60px; font-weight: 400; line-height: 1; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.how { margin: 0 0 10px; color: var(--quiet); font-size: 17px; }
.how q { font-variant-caps: normal; letter-spacing: 0; font-style: italic; }
.book { margin: 0 0 8px; color: var(--rubric); font-size: 15px; font-weight: 400; letter-spacing: 0.1em; }
.book span { color: var(--quiet); }
.art { margin: 0 0 26px; }
.art p, .art blockquote { margin: 0; }
.wait { color: var(--quiet); }

/* A Webster entry. Sense numbers hang in the margin of their definitions. */
.head { margin-bottom: 4px; }
.head b { font-weight: 600; }
.head .acc { font-weight: 400; margin: 0 0.04em; }
.head .light { color: var(--quiet); }
.etym { color: var(--quiet); }
.def { padding-left: 1.5em; margin-top: 6px; }
.def .n { display: inline-block; width: 1.5em; margin-left: -1.5em; color: var(--quiet); }
.def.sub { padding-left: 3em; margin-top: 2px; }
.def.sub .n { font-style: italic; }
.art blockquote { padding-left: 3em; font-size: 17px; line-height: 1.4; }
.art blockquote + blockquote { margin-top: 2px; }
cite { font-style: normal; font-variant-caps: all-small-caps; letter-spacing: 0.05em; color: var(--quiet); margin-left: 0.5em; }
.phrase, .syn, .note { padding-left: 1.5em; margin-top: 6px; font-size: 17px; }
.label { color: var(--quiet); margin-right: 0.4em; }
.tag { color: var(--quiet); }
.nearby { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 34px 0 40px; color: var(--quiet); font-size: 16px; }
.nearby b { font-weight: 400; color: var(--ink); }

/* ---------- the thesauruses ---------- */

#beside { font-size: 17px; line-height: 1.42; padding-top: 82px; }
#beside .art { margin-bottom: 30px; }
.list { margin-top: 3px; }
.list a:hover, .hits a:hover, .cols a:hover { color: var(--rubric); }
.prose { margin-top: 8px; }
.prose + .prose { text-indent: 1.4em; margin-top: 0; }
h4 { margin: 12px 0 2px; font-size: inherit; font-weight: 600; }
h4 a { font-weight: 400; color: var(--quiet); margin-right: 0.3em; }
h4 a:hover { color: var(--rubric); }
h4 span { font-weight: 400; font-style: italic; color: var(--quiet); }
sup { color: var(--quiet); font-size: 0.6em; line-height: 0; }
.xref { color: var(--quiet); }
.xref:hover { color: var(--rubric); }
details { margin-top: 12px; }
summary { color: var(--quiet); cursor: pointer; font-variant-caps: all-small-caps; letter-spacing: 0.06em; }
summary:hover { color: var(--ink); }

/* ---------- lists of words ---------- */

.hits { list-style: none; margin: 0; padding: 0; }
.hits li { padding-left: 1.5em; text-indent: -1.5em; margin-top: 4px; }
.hits a { font-weight: 600; margin-right: 0.5em; }
.whole .hits li { margin-top: 9px; }
.cols { list-style: none; margin: 0; padding: 0; columns: 11em; column-gap: 2rem; }

/* ---------- the front page ---------- */

#intro { max-width: 35em; margin-top: 30px; }
#intro[hidden] { display: none; }
#intro p { margin: 0 0 14px; }
kbd { font: inherit; padding: 0 0.3em; border: 1px solid var(--rule); border-radius: 3px; }
.try { color: var(--quiet); font-size: 17px; }
.try button { border: 0; background: none; padding: 0; cursor: pointer; color: var(--rubric); letter-spacing: inherit; }
.try button:hover { color: var(--ink); }
.books { margin: 40px 0 14px; font-size: 17px; }
.books dt { color: var(--rubric); letter-spacing: 0.1em; font-size: 15px; margin-top: 12px; }
.books dt span { color: var(--quiet); }
.books dd { margin: 0; }
.credits { color: var(--quiet); font-size: 16px; }
.credits a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }

@media (max-width: 900px) {
  word-book { padding: 12px 18px 30vh; }
  #page { display: block; }
  #beside { padding-top: 0; }
  .word { font-size: 44px; }
  #q { font-size: 26px; }
}
#page:empty, #more:empty { display: none; }