/* the dictionary page (dictionary.html, js/dict.js) */
body.dict { background: var(--paper); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dict a { color: inherit; }

/* the header: title, search on a painted stroke, the alphabet; a garden grows round them */
.dict-head { position: relative; overflow: hidden; padding: clamp(84px, 11vh, 130px) var(--gut) clamp(40px, 6vh, 70px); }
.dh-garden { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.dh-garden .gv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 100% 100%; }
.dh-inner { position: relative; z-index: 1; max-width: 1180px; }
.dh-title { margin: 0; font-size: clamp(40px, 13.4vw, 232px); line-height: .8; letter-spacing: -.045em; margin-left: -.04em; }
.dh-p { max-width: 50ch; font-size: clamp(18px, 1.35vw, 23px); margin: .9em 0 1.4em; }
.dh-n { white-space: nowrap; }
.dh-search { position: relative; width: min(940px, 100%); display: flex; align-items: center; }
.dh-search::before { content: ''; position: absolute; inset: -14% -3% -12% -2.2%; background: var(--chalk); z-index: 0;
  -webkit-mask: url(../art/brush/22.webp) 0 0 / 100% 100% no-repeat; mask: url(../art/brush/22.webp) 0 0 / 100% 100% no-repeat; transition: background-color .3s ease; }
.dh-search:focus-within::before { background: #fffaf0; }
.dh-search input { position: relative; z-index: 1; flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); caret-color: #b81d0e;
  font-size: clamp(28px, 4vw, 60px); padding: .32em .5em .3em .45em; letter-spacing: -.01em; -webkit-appearance: none; appearance: none; }
.dh-search input::placeholder { color: rgba(14, 13, 11, .34); }
.dh-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.dh-count { position: relative; z-index: 1; font-size: 12px; letter-spacing: .14em; padding-right: 1.6em; opacity: .6; }
.dh-hint { max-width: 62ch; font-size: clamp(15px, 1.05vw, 18px); opacity: .8; margin: 1.5em 0 1.1em; }
.dh-letters { display: flex; flex-wrap: wrap; gap: 2px 4px; max-width: 1180px; }
.dh-letters button { position: relative; border: 0; background: none; cursor: pointer; color: var(--ink); font: inherit; font-size: clamp(17px, 1.4vw, 22px); padding: .18em .42em; }
.dh-letters button::before { content: ''; position: absolute; inset: 4% -8%; z-index: -1; background: var(--chalk); opacity: 0; transition: opacity .2s ease;
  -webkit-mask: url(../art/brush/30.webp) 0 0 / 100% 100% no-repeat; mask: url(../art/brush/30.webp) 0 0 / 100% 100% no-repeat; }
.dh-letters button:hover::before { opacity: .6; }
.dh-letters button.on::before { opacity: 1; }
html.arriving .dh-inner > * { opacity: 0; }
html.arrived .dh-inner > * { animation: arrive 1s cubic-bezier(.2, .7, .2, 1) both; }
html.arrived .dh-inner > :nth-child(2) { animation-delay: .08s; } html.arrived .dh-inner > :nth-child(3) { animation-delay: .16s; }
html.arrived .dh-inner > :nth-child(4) { animation-delay: .24s; } html.arrived .dh-inner > :nth-child(5) { animation-delay: .3s; }

/* results beside the entry */
.dict-main { display: grid; grid-template-columns: minmax(300px, 31%) 1fr; gap: clamp(24px, 4vw, 72px); padding: 0 var(--gut); align-items: start; }
.dict-results { position: sticky; top: 0; max-height: 100vh; overflow: auto; padding: 36px 10px 60px 0; margin-left: -14px; scrollbar-width: thin; scrollbar-color: rgba(14,13,11,.25) transparent; overscroll-behavior: contain; }
.r-head { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 12px 14px; opacity: .6; }
.r { position: relative; display: block; padding: 10px 14px 11px; text-decoration: none; color: var(--ink); }
.r::before { content: ''; position: absolute; inset: 2px -2px; z-index: -1; background: var(--yellow); opacity: 0; transition: opacity .2s ease;
  -webkit-mask: url(../art/brush/05.webp) 0 0 / 100% 100% no-repeat; mask: url(../art/brush/05.webp) 0 0 / 100% 100% no-repeat; }
.r:hover::before { opacity: .45; }
.r.on::before { opacity: 1; }
.r-f { display: block; font-size: clamp(19px, 1.45vw, 24px); line-height: 1.12; }
.r-g { display: block; font-size: 16.5px; line-height: 1.25; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.r-g .none, .e-gloss.none { opacity: .45; }
.r-c { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .55; margin-top: 4px; }
.r.c-C .r-c { color: #b81d0e; opacity: .9; }
.approx { margin-left: .35em; opacity: .55; font-style: normal; }
.r-none { padding: 14px; opacity: .75; }
.r-more { margin: 12px 14px; border: 0; background: none; cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; text-decoration: underline; text-underline-offset: .3em; }

/* the entry */
.dict-entry { min-width: 0; }
.e-in { padding: 44px 0 120px; max-width: 1000px; }
.e-back { display: none; }
.e-head { position: relative; }
.e-head::after { content: ''; display: block; clear: both; }
.e-cap { --sq: clamp(96px, 10.5vw, 168px); --s: calc(var(--sq) / (1 - 2 * var(--cap-pad))); float: left; width: var(--s); height: var(--s); margin: calc(var(--s) * var(--cap-pad) * -1 + .9vw) clamp(14px, 1.6vw, 28px) 12px calc(var(--s) * var(--cap-pad) * -1); opacity: 0; transform: scale(.96); transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .1, 1); }
.e-head.has-cap .e-cap { transform: none; }
.e-star { font-size: .62em; vertical-align: .32em; margin-right: .04em; opacity: .8; }
.e-head.has-cap .e-cap { opacity: 1; }
.e-head:not(.has-cap) .e-cap { position: absolute; }
.e-form { margin: 0; font-size: clamp(50px, 6.6vw, 116px); line-height: .92; letter-spacing: -.02em; overflow-wrap: anywhere; }
.e-head.has-cap .e-form { padding-top: .06em; }
.e-meta { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin: .9em 0 0; opacity: .8; }
.e-ipa { text-transform: none; letter-spacing: .02em; font-size: 16px; margin-left: 1em; opacity: .9; white-space: nowrap; }
.e-gloss { font-size: clamp(26px, 2.5vw, 40px); line-height: 1.12; margin: .35em 0 0; max-width: 30ch; }
.e-senses { font-size: 18px; margin: 1em 0 0; padding-left: 1.4em; max-width: 56ch; }
.e-senses li { margin: .2em 0; }
.e-sec { clear: both; margin-top: clamp(40px, 5vw, 64px); }
.e-h { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #b81d0e; margin: 0 0 16px; }
.e-sec p { margin: .35em 0; max-width: 62ch; }
.e-sec .note { opacity: .72; font-size: .92em; }
.seg { font-size: clamp(22px, 2vw, 30px); letter-spacing: .02em; }
.xl { text-decoration: none; white-space: nowrap; }
.xl .pie { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: rgba(14,13,11,.35); }
.xl:hover .pie { text-decoration-color: #b81d0e; }
.xl .serif { opacity: .75; }

/* the spoken headword */
.e-say { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; margin: .9em 0 0; }
.e-say[hidden] { display: none; }
.e-play { position: relative; display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; cursor: pointer; color: var(--ink);
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 10px 26px 10px 18px; }
.e-play::before { content: ''; position: absolute; inset: 0 -6px 0 -4px; z-index: -1; background: var(--yellow);
  -webkit-mask: url(../art/brush/37.webp) 0 0 / 100% 100% no-repeat; mask: url(../art/brush/37.webp) 0 0 / 100% 100% no-repeat; }
.e-play-i { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--ink); }
.e-play.playing .e-play-i { width: 10px; height: 12px; border: 0; background: linear-gradient(90deg, var(--ink) 0 35%, transparent 35% 65%, var(--ink) 65%); }
.e-voices { font-size: 17px; }
.e-voices button { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; opacity: .6; }
.e-voices button.on { opacity: 1; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }

/* inflection */
.e-para { overflow-x: auto; }
.tabs { display: flex; flex-wrap: wrap; gap: .3em 1.4em; margin-bottom: 14px; font-size: 18px; }
.tabs button { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; opacity: .6; }
.tabs button.on { opacity: 1; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.tabs button:disabled { opacity: .22; cursor: default; }
.tv { font-weight: 600; }
.para { border-collapse: collapse; font-size: clamp(17px, 1.35vw, 21px); }
.para th { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-align: left; opacity: .55; padding: 0 28px 8px 0; white-space: nowrap; }
.para tbody th { padding: 9px 28px 9px 0; vertical-align: top; }
.para td { padding: 7px 34px 7px 0; vertical-align: top; }
.para tbody tr:nth-child(odd) { background: linear-gradient(90deg, rgba(255, 210, 26, .34), rgba(255, 210, 26, .14) 75%, rgba(255, 210, 26, 0)); }
.c1 { display: block; white-space: nowrap; }
.para .abbr { display: none; }
.c2 { display: block; font-size: .72em; opacity: .55; white-space: nowrap; margin-top: 2px; }
.ptcp { margin-top: 14px !important; }

/* LIV stems */
.liv { display: flex; flex-wrap: wrap; gap: 8px 30px; }
.liv .data { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .6; margin-right: .4em; }
.liv .book { font-size: 19px; }

/* corpus */
.ex { margin: 0 0 26px; max-width: 64ch; }
.ex-pie { font-size: clamp(19px, 1.6vw, 25px); line-height: 1.45; margin: 0; }
.ex-pie mark { color: inherit; background: var(--stroke) 0 0 / 100% 100% no-repeat; padding: .08em .28em .12em; margin: 0 -.12em; }
.ex-en { font-size: clamp(17px, 1.25vw, 20px); margin-top: .3em; opacity: .82; }

/* descendants */
.refl { columns: 3 250px; column-gap: 40px; }
.rb { break-inside: avoid; margin: 0 0 26px; }
.rb-h { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 8px; }
.rl { font-size: 16.5px; line-height: 1.3; margin: .3em 0 !important; }
.rl-lang { opacity: .65; margin-right: .2em; }
.rl-f { font-weight: 600; font-size: 18px; }
.rl-s { opacity: .55; font-size: 15px; }
.rl-g { opacity: .75; }
.rl-more { font-size: 10.5px !important; letter-spacing: .14em; text-transform: uppercase; opacity: .5; }

/* family */
.fam { display: flex; flex-wrap: wrap; gap: 10px 30px; font-size: 18px; }
.fam .xl { white-space: normal; }
.e-src { clear: both; margin-top: clamp(44px, 5vw, 70px); font-size: 16px; opacity: .72; max-width: 70ch; }
.e-src a { text-underline-offset: .2em; }

/* footer */
.dict-foot { position: relative; padding: clamp(60px, 8vw, 120px) var(--gut); }
.df-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; max-width: 1100px; font-size: clamp(15px, 1.05vw, 17px); }
.df-cols p { margin: 0; }
.dict-foot .foot-by { margin-top: 5vh; }

/* phones and narrow tablets: results first, an entry opens over them */
@media (max-width: 899px) {
  .dict-head { padding-top: 84px; }
  .dict-main { display: block; padding: 0 var(--gut); }
  .dict-results { position: static; max-height: none; overflow: visible; padding: 26px 0 60px; margin: 0 -14px; }
  .dict-entry { position: fixed; inset: 0; z-index: 50; background: var(--paper); overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gut);
    transform: translateX(104%); transition: transform .5s cubic-bezier(.2, .7, .1, 1); visibility: hidden; }
  html.entry-open .dict-entry { transform: none; visibility: visible; }
  html.entry-open body { overflow: hidden; }
  .e-in { padding: 78px 0 90px; }
  .e-back { display: inline-block; position: relative; border: 0; background: none; cursor: pointer; color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 8px 22px 8px 14px; margin: 0 0 26px -14px; }
  .e-back::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--yellow); -webkit-mask: url(../art/brush/17.webp) 0 0 / 100% 100% no-repeat; mask: url(../art/brush/17.webp) 0 0 / 100% 100% no-repeat; }
  .e-cap { --sq: 76px; }
  .e-form { font-size: clamp(42px, 12vw, 64px); }
  .refl { columns: 1; }
  .df-cols { grid-template-columns: 1fr; gap: 1.2em; }
  .para { font-size: 16px; }
  .para td { padding-right: 14px; }
  .para th, .para tbody th { padding-right: 12px; }
  .para .full { display: none; } .para .abbr { display: inline; }
  .e-para { margin-right: calc(-1 * var(--gut)); }
}
@media (prefers-reduced-motion: reduce) { .dict-entry { transition: none; } html.arrived .dh-inner > * { animation: none; } }
/* painted backings sit behind their own element, not behind the paper */
.r, .e-play, .e-back, .dh-letters button { isolation: isolate; }

/* a sentence in the search is translated: the translation above the matches, word by word, each word an entry */
.trc { position: relative; isolation: isolate; margin: 0 0 30px; padding: 22px 22px 20px; }
.trc::before { content: ''; position: absolute; inset: 0 -6px; z-index: -1; background: var(--yellow);
  -webkit-mask: url(../art/brush/44.webp) 0 0 / 100% 100% no-repeat; mask: url(../art/brush/44.webp) 0 0 / 100% 100% no-repeat; }
.trc .r-head { margin-left: 0; color: #8e2a17; opacity: 1; }
.trc-main { margin: .2em 0 .5em; font-size: clamp(22px, 1.9vw, 30px); line-height: 1.2; }
.trc-main.serif { font-size: clamp(22px, 1.7vw, 28px); }
.trc-words { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.tw { display: inline-flex; flex-direction: column; }
.tw a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: rgba(14,13,11,.4); }
.tw a:hover { text-decoration-color: #b81d0e; }
.tw-f { font-size: 19px; }
.tw-g { font-size: 10px; letter-spacing: .08em; opacity: .7; margin-top: 2px; }
.trc-ipa { font-size: 13px; opacity: .7; margin: .8em 0 0; }
.trc-wait { opacity: .7; margin: .2em 0 0; }
.trc.busy .trc-wait { animation: trcPulse 1.2s ease-in-out infinite; }
@keyframes trcPulse { 50% { opacity: .35; } }