/* The public dictionary and library (signed-out pages, marketing layout). */
.pub { max-width: 920px; margin: 0 auto; padding: 32px 16px 64px; display: flex; flex-direction: column; gap: 20px; }
.pub__crumbs { font-size: 14px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.pub__crumbs a { color: var(--text-body); }
.pub__crumbs .ar { font-size: 17px; }
.pub__head { display: flex; flex-direction: column; gap: 8px; }
.pub__title { margin: 0; }
.pub__lead { margin: 0; font-size: 17px; line-height: 1.55; color: var(--text-body); max-width: 62ch; }
.pub__search { margin: 0; }

/* A word */
.pub__word-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.pub__latin { font-size: 20px; color: var(--clay); font-style: italic; }
.pub__gloss { font-size: 32px; line-height: 1.15; margin: 0; }
.pub__headword { font-size: 56px; margin: 0; }
.pub__family { display: flex; flex-direction: column; gap: 12px; }
.pub__words { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 4px 20px; }
.pub__word-link { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); color: var(--ink); }
.pub__word-link span:last-child { font-size: 14px; color: var(--text-body); text-align: left; }
.pub__word-link .ar { font-size: 21px; order: 2; }
.pub__word-link:hover { text-decoration: none; color: var(--clay); }
.pub__more { font-size: 14px; align-self: flex-start; }

/* A root */
.pub__root { display: flex; flex-direction: column; gap: 6px; }
.pub__root h1 { margin: 0; }
.pub__root-letters { font-size: 52px; }
.pub__root-meaning { font-size: 24px; margin: 0; }
.pub__root-meta { margin: 0; font-size: 14px; opacity: .8; }

/* Search results */
.pub__results { list-style: none; margin: 0; padding: 0; }
.pub__results li + li { border-top: 1px solid var(--line-soft); }
.pub__result { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; color: var(--ink); }
.pub__result:hover { text-decoration: none; }
.pub__result:hover .pub__result-gloss { color: var(--clay); }
.pub__result-gloss { font-size: 21px; }
.pub__result-ar { font-size: 28px; }

/* The library */
.pub__shelf { display: flex; flex-direction: column; gap: 10px; }
.pub__shelf-title { font-size: 26px; margin: 8px 0 0; }
.pub__books { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 12px; }
.pub__book { display: flex; flex-direction: column; gap: 6px; height: 100%; color: var(--ink); }
.pub__book:hover { text-decoration: none; }
.pub__book-title { font-size: 22px; line-height: 1.2; }
.pub__book-ar { font-size: 20px; color: var(--clay); }
.pub__book-meta { font-size: 14px; color: var(--text-muted); margin: 0; }
.pub__book-desc { font-size: 15px; color: var(--text-body); }
.pub__book-head { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.pub__book-head-ar { font-size: 34px; color: var(--clay); margin: 0; }
.pub__contents { display: flex; flex-direction: column; gap: 10px; }
.pub__toc { list-style: none; margin: 0; padding: 0; columns: 2 280px; column-gap: 28px; }
.pub__toc li { break-inside: avoid; }
.pub__toc a { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); color: var(--ink); font-size: 15px; }
.pub__toc-page { color: var(--text-muted); font-size: 13px; }

/* A page */
.pub__page-head { gap: 12px; flex-wrap: wrap; }
.pub__page-title { font-size: 28px; margin: 0; }
.pub__page-section { font-size: 15px; color: var(--text-body); }
.pub__pager { flex-wrap: wrap; gap: 8px; }
.pub__pager-count { font-size: 14px; color: var(--text-muted); }
.pub__text { display: flex; flex-direction: column; gap: 14px; }
.pub__para { font-size: 25px; line-height: 2; margin: 0; text-align: justify; }
.pub__verse { font-size: 24px; line-height: 1.9; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 32px; }
.pub__verse span:last-child { text-align: left; }
.pub__translation { margin: -6px 0 4px; font-size: 15px; line-height: 1.55; color: var(--text-body); font-style: italic; text-align: left; }
.pub__note { margin: 0; font-size: 13px; color: var(--text-muted); }

/* Sign-up invitation */
.pub__join { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
.pub__join-title { font-size: 26px; margin: 0; }
.pub__join-text { margin: 0; max-width: 58ch; opacity: .85; font-size: 15px; line-height: 1.5; }

@media (max-width: 600px) {
  .pub__headword { font-size: 44px; }
  .pub__gloss { font-size: 26px; }
  .pub__para { font-size: 22px; text-align: right; }
  .pub__verse { grid-template-columns: 1fr; }
  .pub__verse span:last-child { text-align: right; padding-right: 24px; }
}