/* Self-hosted. No third-party request on render, no Google Fonts hotlink
   (which German courts have ruled on), and no layout shift from a late swap. */
@font-face{font-family:"Fraunces";src:url(/assets/fonts/fraunces.woff2) format("woff2-variations");
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/assets/fonts/fraunces-italic.woff2) format("woff2-variations");
  font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/assets/fonts/plex-400.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/assets/fonts/plex-400i.woff2) format("woff2");
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/assets/fonts/plex-600.woff2) format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/plexmono-500.woff2) format("woff2");
  font-weight:500;font-style:normal;font-display:swap}

/* KENNING — a philological dictionary, set for a screen.
   Motif: the lexicon entry. Leader rules replace every card, box and shadow. */

:root{
  --paper:#E8E7E1;
  --ink:#16161A;
  --ink-soft:#55554E;
  --rule:#C3C2B8;        /* hairlines ONLY — 1.44:1, never text */
  --muted:#5F6058;       /* muted TEXT — 5.4:1 on paper, passes AA */
  --rubric:#A8281E;
  --verdigris:#2F6B5E;
  --raise:#00000008;

  --serif:"Fraunces",Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --measure:42rem;
  --rail:10rem;
  --wonk:'SOFT' 0,'WONK' 1;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#131417;
    --ink:#E6E4DC;
    --ink-soft:#9B998F;
    --rule:#2C2E33;
    --muted:#8E8C83;
    --rubric:#E4574A;
    --verdigris:#5FB39C;
    --raise:#FFFFFF08;
  }
}
:root[data-theme="dark"]{
  --paper:#131417;
  --ink:#E6E4DC;
  --ink-soft:#9B998F;
  --rule:#2C2E33;
  --muted:#8E8C83;
  --rubric:#E4574A;
  --verdigris:#5FB39C;
  --raise:#FFFFFF08;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--rubric);color:var(--paper)}

/* ---------- leader rule: the one repeated mark ---------- */
.lead{display:flex;align-items:center;gap:.85rem;width:100%}
.lead > hr{flex:1;border:0;border-top:1px solid var(--rule);align-self:center;margin:0;min-width:1.5rem}
.lead .meta{
  font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;flex:none
}

/* ---------- shell ---------- */
.shell{max-width:64rem;margin:0 auto;padding:0 1.5rem;min-width:0}
.masthead{border-bottom:1px solid var(--rule)}
.masthead .shell{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;padding-top:1.15rem;padding-bottom:1.15rem;flex-wrap:wrap}
.wordmark{
  font-family:var(--serif);font-variation-settings:var(--wonk);
  font-weight:600;font-size:1.35rem;letter-spacing:.01em;color:var(--ink);
  text-decoration:none;display:inline-flex;align-items:baseline;gap:.06em
}
.wordmark .bar{color:var(--rubric);font-weight:400;padding:0 .1em}
.wordmark:hover .bar{color:var(--verdigris)}
/* The nav grows to fill the row and sets its contents flush right, which keeps the
   links where they have always sat and puts the language badge at the far right end
   of the same row rather than in a third group of its own. */
.masthead nav{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;
  gap:.5rem 1.15rem;font-size:.8rem;letter-spacing:.04em;min-width:0;flex:1 1 auto}
.masthead nav a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px}
.masthead nav a:hover{color:var(--ink);border-bottom-color:var(--rubric)}

/* Visually hidden, still read aloud. Used for the label that tells a screen reader
   what the language control is before it announces which language is selected. */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Language switcher. Real links, one per locale, pointing at the current page in
   that language — it has to work before any script runs, which is why this is a
   <details> disclosure and not a scripted menu: closed, it is one word; open, it is
   the whole list; with JavaScript off, both still happen. Set in the mono face at
   label size so it reads as apparatus rather than as another navigation row.
   The panel is sized for thirty languages, not for the six we have. */
.masthead .lang{
  position:relative;min-width:0;
  font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.08em
}
/* Closed, the control is a two-letter badge — PT, DE — because at thirty languages
   the endonym in the masthead is the same wall of text the old row was. The full
   name is still announced to a screen reader and shown on hover; only the badge is
   drawn. */
.langbadge{letter-spacing:.12em}
/* Language names are proper nouns in their own scripts and are NOT uppercased, even
   though the rest of the apparatus is. Greek uppercase drops the accents (Ελληνικά
   becomes ΕΛΛΗΝΙΚΑ, which is a different word to a Greek reader) and Turkish has the
   dotted/dotless i problem; the mono face and the tracking carry the register instead. */
.masthead .lang>summary,.langmenu a,.langmenu>span{text-transform:none}
.masthead .lang>summary{
  list-style:none;cursor:pointer;color:var(--ink);
  display:inline-flex;align-items:center;gap:.45rem;
  padding-bottom:2px;border-bottom:1px solid var(--rule)
}
.masthead .lang>summary::-webkit-details-marker{display:none}
/* the caret is drawn, not typed: a glyph would inherit the uppercase tracking */
.masthead .lang>summary::after{
  content:'';width:.34rem;height:.34rem;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-.15em) rotate(45deg);transition:transform .12s ease
}
.masthead .lang[open]>summary::after{transform:translateY(.05em) rotate(225deg)}
.masthead .lang>summary:hover{color:var(--rubric);border-bottom-color:var(--rubric)}
.masthead .lang>summary:focus-visible{outline:2px solid var(--rubric);outline-offset:3px}

.langmenu{
  position:absolute;top:calc(100% + .6rem);right:0;z-index:30;
  background:var(--paper);border:1px solid var(--ink);padding:.6rem .8rem;
  display:grid;gap:0 1.6rem;align-content:start;
  max-height:min(64vh,26rem);overflow:auto;overscroll-behavior:contain;
  box-shadow:0 12px 34px rgba(0,0,0,.18)
}
/* max-content, not 1fr. The panel is absolutely positioned, so its width is
   shrink-to-fit; fr columns have no intrinsic contribution and collapse the whole
   panel onto itself — at thirty languages the columns overlapped into an unreadable
   smear. Each column is as wide as its longest endonym, and the panel is capped so
   three columns of "Bahasa Indonesia" cannot run off the viewport. */
.lang[data-cols="2"] .langmenu{grid-template-columns:repeat(2,max-content)}
.lang[data-cols="3"] .langmenu{grid-template-columns:repeat(3,max-content)}
.langmenu{max-width:min(92vw,42rem)}
.langmenu a,.langmenu>span{
  display:block;white-space:nowrap;padding:.3rem .05rem;
  color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent
}
.langmenu a:hover{color:var(--rubric);border-bottom-color:var(--rubric)}
.langmenu a:focus-visible{outline:2px solid var(--rubric);outline-offset:1px}
.langmenu [aria-current]{color:var(--ink)}
.langmenu [aria-current]::before{content:'\2014\2002';color:var(--rubric)}

/* The filter is added by app.js and only past the point where scanning stops
   working — roughly a dozen languages. It never exists with JS off, so the list
   below it is always the complete list. */
.langfilter{
  /* min-width:0 keeps the field out of the panel's intrinsic width calculation, so
     the columns decide how wide the panel is and the field then fills it */
  grid-column:1/-1;margin:0 0 .5rem;padding:.35rem .45rem;width:100%;min-width:0;
  font:inherit;letter-spacing:.06em;text-transform:none;
  color:var(--ink);background:transparent;border:1px solid var(--rule)
}
.langfilter:focus{outline:none;border-color:var(--rubric)}
.langnone{grid-column:1/-1;padding:.3rem .05rem;color:var(--muted);text-transform:none;letter-spacing:.04em}

@media(max-width:560px){
  /* On a phone the nav has its own row under the wordmark and reads left-to-right
     like the rest of the page, so the links go back to flush left and only the badge
     is pushed to the right edge. */
  .masthead nav{justify-content:flex-start}
  .masthead .lang{margin-left:auto}
  /* The badge rides along at the end of the nav row rather than claiming a row of
     its own — that was worth a full-width strip when it spelled out six language
     names, and is not worth it for two letters. */
  .langmenu{left:auto;right:0;min-width:min(88vw,20rem);max-width:min(92vw,24rem);max-height:min(58vh,22rem)}
  .lang[data-cols="2"] .langmenu,
  .lang[data-cols="3"] .langmenu{grid-template-columns:repeat(2,minmax(0,1fr))}
  .langmenu a,.langmenu>span{white-space:normal}
}

main{padding:2.75rem 0 4rem}
.entry{display:grid;grid-template-columns:var(--rail) minmax(0,var(--measure));gap:2.5rem;align-items:start}
@media(max-width:780px){
  .entry{grid-template-columns:minmax(0,1fr);gap:1rem}
  :root{--rail:auto}
  h2{white-space:normal}
  .lead{flex-wrap:wrap}
  .roll{margin-left:0}
  .controls{gap:.6rem}
}

/* ---------- marginal gloss rail ---------- */
.rail{
  position:sticky;top:1.5rem;display:flex;flex-direction:column;gap:.9rem;
  font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)
}
.rail dl{margin:0;display:flex;flex-direction:column;gap:.75rem}
.rail dt{font-size:.66rem;color:var(--muted);letter-spacing:.1em}
.rail dd{margin:.1rem 0 0;color:var(--ink-soft);font-weight:600}
@media(max-width:780px){
  .rail{position:static;flex-direction:row;flex-wrap:wrap;gap:1.25rem;padding-bottom:.75rem;border-bottom:1px solid var(--rule)}
  .rail dl{flex-direction:row;gap:1.25rem}
}

/* ---------- type ---------- */
h1{
  font-family:var(--serif);font-variation-settings:var(--wonk);
  font-weight:600;font-size:clamp(2rem,4.6vw,2.9rem);line-height:1.08;
  margin:0 0 .55rem;letter-spacing:-.015em;text-wrap:balance
}
h2{
  font-family:var(--serif);font-variation-settings:var(--wonk);
  font-weight:600;font-size:1.4rem;line-height:1.2;margin:0;letter-spacing:-.01em;
  white-space:nowrap;flex:none
}
h3{font-family:var(--sans);font-size:.95rem;font-weight:600;margin:0 0 .3rem;letter-spacing:.005em}
p{margin:0 0 1rem;max-width:38rem}
p:last-child{margin-bottom:0}
.dek{font-family:var(--serif);font-variation-settings:var(--wonk);font-style:italic;font-size:1.12rem;color:var(--ink-soft);max-width:34rem;margin:0 0 1.9rem;line-height:1.45}
.pilcrow{color:var(--rubric);font-family:var(--serif);padding-right:.35em}
a{color:var(--verdigris);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--rubric)}
section{margin-top:3rem;display:flex;flex-direction:column;gap:1.2rem}
:focus-visible{outline:2px solid var(--rubric);outline-offset:3px}

/* ---------- the generator ---------- */
.controls{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:1.5rem}
.variants{display:flex;gap:0;border-bottom:1px solid var(--rule)}
.variants button{
  appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  font-family:var(--sans);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);padding:.45rem .8rem;cursor:pointer;margin-bottom:-1px
}
.variants button:hover{color:var(--ink)}
.variants button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--rubric)}
.roll{
  appearance:none;cursor:pointer;font-family:var(--sans);font-size:.78rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--paper);background:var(--rubric);
  border:0;padding:.62rem 1.4rem;margin-left:auto
}
.roll:hover{background:var(--verdigris)}
.roll:active{transform:translateY(1px)}
.count{font-family:var(--mono);font-size:.72rem;color:var(--ink-soft);letter-spacing:.02em}

/* ---------- the lexicon entry: headword + etymology row ---------- */
.names{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.names li{padding:.9rem 0;border-top:1px solid var(--rule)}
.names li:first-child{border-top:0;padding-top:0}
.headword{display:flex;align-items:baseline;gap:.5rem .85rem;width:100%;margin:0;flex-wrap:wrap;min-width:0}
.headword .hw{
  font-family:var(--serif);font-variation-settings:var(--wonk);
  font-weight:600;font-size:1.5rem;line-height:1.1;letter-spacing:-.012em;color:var(--ink);
  min-width:0;overflow-wrap:anywhere
}
.headword hr{flex:1;border:0;border-top:1px solid var(--rule);align-self:center;margin:0;min-width:1rem}
.copy{
  appearance:none;background:none;border:0;cursor:pointer;flex:none;padding:.15rem .3rem;
  font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted)
}
.names li:hover .copy{color:var(--ink-soft)}
.copy:hover{color:var(--rubric)}
.copy[data-done="1"]{color:var(--verdigris)}

.etym{margin:.42rem 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.28rem .5rem;font-size:.86rem}
.etym .frag{font-family:var(--mono);font-weight:500;color:var(--verdigris);font-size:.82rem}
.etym .gl{font-family:var(--serif);font-variation-settings:var(--wonk);font-style:italic;color:var(--ink-soft)}
.etym .plus{color:var(--muted);font-family:var(--mono);padding:0 .1rem}
.sense{
  margin:.24rem 0 0;font-family:var(--serif);font-variation-settings:var(--wonk);font-style:italic;
  color:var(--ink);font-size:1rem
}
/* Quotation marks follow the page's language, not the stylesheet's origin: German
   opens low, French sets guillemets with a space. Driven off <html lang> so a
   translated page never quotes itself in English. */
.sense::before{content:'\201C'}
.sense::after{content:'\201D'}
:lang(de) .sense::before{content:'\201E'}
:lang(de) .sense::after{content:'\201C'}
:lang(fr) .sense::before{content:'\AB\202F'}
:lang(fr) .sense::after{content:'\202F\BB'}
:lang(it) .sense::before,:lang(es) .sense::before{content:'\AB\2009'}
:lang(it) .sense::after,:lang(es) .sense::after{content:'\2009\BB'}

/* ---------- prose blocks ---------- */
.lore p{font-size:1.02rem}
.faq{display:flex;flex-direction:column}
.faq .qa{padding:1rem 0;border-top:1px solid var(--rule)}
.faq .qa:first-child{border-top:0;padding-top:.2rem}
.faq p{font-size:.95rem;color:var(--ink-soft);margin:0}

/* ---------- index of generators ---------- */
.rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rows li{border-top:1px solid var(--rule)}
.rows li:first-child{border-top:0}
.rows a{
  display:flex;align-items:baseline;gap:.85rem;width:100%;padding:.72rem 0;
  text-decoration:none;color:var(--ink)
}
.rows a:hover .rw{color:var(--rubric)}
.rows .rw{font-family:var(--serif);font-variation-settings:var(--wonk);font-weight:600;font-size:1.08rem;flex:none}
.rows a hr{flex:1;border:0;border-top:1px solid var(--rule);align-self:center;margin:0;min-width:1rem;opacity:.7}
.rows .rm{font-size:.7rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);flex:none}

/* ---------- homepage cluster headings ----------
   The complaint they answer: while scrolling the list of sets, the category
   change was invisible. Three changes: a different type size entirely
   (2.05rem vs the rows' 1.08rem), a heavy top rule that reads as a chapter
   break, and sticky positioning so the current category stays named at the
   top of the viewport the whole time you are inside it. */
section.cluster{margin-top:0;gap:0}
.chead{
  position:sticky;top:0;z-index:6;
  display:flex;align-items:baseline;gap:.8rem;
  margin-top:3.4rem;padding:.85rem 0 .75rem;
  background:var(--paper);border-top:3px solid var(--ink)
}
.chead::after{
  content:'';position:absolute;left:0;right:0;top:100%;height:1.2rem;
  background:linear-gradient(var(--paper),rgba(0,0,0,0));pointer-events:none
}
.chead .cnum{
  font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.1em;
  color:var(--rubric);flex:none;line-height:1
}
.chead h2{font-size:2.05rem;letter-spacing:-.022em;line-height:1.05}
.chead > hr{flex:1;border:0;border-top:1px solid var(--rule);align-self:center;margin:0;min-width:1.5rem}
.chead .meta{
  font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;flex:none
}
section.cluster .rows{padding-bottom:.5rem}
section.cluster .rows li:first-child{border-top:0}
@media (max-width:560px){
  .chead h2{font-size:1.62rem}
  .chead{gap:.6rem;margin-top:2.6rem}
}

.hero{max-width:44rem;margin-bottom:2.6rem}
.hero h1{font-size:clamp(2.3rem,6vw,3.6rem)}
.specimen{margin:2.2rem 0 0;padding:1.4rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}

footer{border-top:1px solid var(--rule);margin-top:4rem}
footer .shell{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding-top:1.4rem;padding-bottom:2.4rem;font-size:.78rem;color:var(--ink-soft)}
footer a{color:var(--ink-soft)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* worked examples inside a lexicon entry */
.lex-ex{margin:.85rem 0 0;padding-left:1.1rem;border-left:1px solid var(--rule)}
.lex-ex li{padding:.6rem 0}
.lex-ex .hw{font-size:1.12rem}
.lex-ex .sense{font-size:.92rem}

@media(prefers-reduced-motion:no-preference){
  /* every in-page jump on the site — skip link, category anchors, back to top */
  html{scroll-behavior:smooth}
}
/* the masthead is the #top target; it must not draw a focus ring when jumped to */
#top:focus{outline:none}

/* Back to top. A real link to #top, not a scroll script: it works with the keyboard,
   it works in a new tab, and the footer carries the same link for anyone without
   JavaScript. Set like the rest of the apparatus — hairline, paper, mono — rather
   than as a floating circle, which would be the only such shape on the site.
   It sits above the consent bar while that is up; app.js sets --consent-h. */
.totop{
  position:fixed;right:clamp(1rem,4vw,2.25rem);bottom:calc(clamp(1rem,4vw,2.25rem) + var(--consent-h,0px));
  z-index:40;display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .8rem;min-height:44px;box-sizing:border-box;
  background:var(--paper);border:1px solid var(--ink);
  color:var(--ink-soft);text-decoration:none;
  font-family:var(--mono);font-size:.65rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  box-shadow:0 8px 24px rgba(0,0,0,.16);
  opacity:0;transform:translateY(.4rem);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,bottom .18s ease
}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{color:var(--rubric);border-color:var(--rubric)}
.totop:focus-visible{outline:2px solid var(--rubric);outline-offset:3px;opacity:1;transform:none;pointer-events:auto}
/* the arrow is drawn, like the language caret, so it does not inherit the tracking */
.totop-arrow{
  width:.4rem;height:.4rem;border-left:1px solid currentColor;border-top:1px solid currentColor;
  transform:translateY(.12em) rotate(45deg)
}
@media(max-width:560px){
  /* on a phone the label costs more room than it explains, so the arrow stands alone.
     The words are clipped rather than removed, so the link keeps its accessible name. */
  /* 44px is the smallest target a thumb hits reliably; the arrow-only button has to
     be padded out to it rather than shrinking to the size of its glyph */
  .totop{padding:.6rem;gap:0;min-width:44px;justify-content:center}
  .totop-arrow{width:.5rem;height:.5rem}
  .totop-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
  .totop{transition:none}
}

/* consent bar — same rules-not-cards language as everything else */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--paper);border-top:1px solid var(--ink-soft)
}
.consent .shell{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;padding-top:.95rem;padding-bottom:.95rem}
.consent p{margin:0;font-size:.85rem;color:var(--ink-soft);max-width:46rem;flex:1 1 20rem}
.consent-act{display:flex;gap:.6rem;align-items:center;flex:none}
.consent button{
  appearance:none;cursor:pointer;font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;padding:.55rem 1.1rem;border:1px solid var(--rule);
  background:none;color:var(--ink-soft)
}
.consent button:hover{color:var(--ink);border-color:var(--ink-soft)}
.consent button.roll{background:var(--rubric);color:var(--paper);border-color:var(--rubric);margin-left:0}
.consent button.roll:hover{background:var(--verdigris);border-color:var(--verdigris)}

/* Consent bar must not overlay content; reserve room while it is up. */
body:has(.consent:not([hidden])){padding-bottom:9rem}
@media(max-width:620px){
  .shell{padding:0 1.1rem}
  .masthead nav{gap:.4rem .9rem;font-size:.76rem}
  .headword .hw{font-size:1.28rem}
  .consent .shell{gap:.8rem}
  .consent p{font-size:.8rem}
  .consent-act{width:100%}
  .consent-act button{flex:1}
  body:has(.consent:not([hidden])){padding-bottom:12rem}
}
/* the roll button belongs with its controls, not floated to the far edge */
@media(max-width:780px){
  .controls{align-items:stretch}
  .roll{width:100%;text-align:center}
}

/* the landing-page generator: the page's working demonstration, not a screenshot */
.try{margin-top:2.4rem}
.try .count a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule)}
.try .count a:hover{color:var(--rubric);border-bottom-color:var(--rubric)}

/* lexicon lookup — the index promises "look up a sense", so it needs a field */
.lexfind{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;margin:1.6rem 0 .4rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--rule)}
.lexfind label{font-size:.7rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);flex:none}
.lexfind input{
  flex:1 1 14rem;min-width:0;appearance:none;background:none;border:0;border-bottom:1px solid var(--ink-soft);
  font-family:var(--serif);font-variation-settings:var(--wonk);font-size:1.15rem;color:var(--ink);
  padding:.25rem 0;border-radius:0
}
.lexfind input::placeholder{color:var(--muted);font-style:italic}
.lexfind input:focus{outline:none;border-bottom-color:var(--rubric)}
.lexcount{font-family:var(--mono);font-size:.72rem;color:var(--muted);flex:none}
.lexsec[hidden]{display:none}

/* skip link — visible only when focused, first stop in the tab order */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--rubric);color:var(--paper);
  padding:.7rem 1.1rem;font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;text-decoration:none}
.skip:focus{left:0}
main:focus{outline:none}

/* ---------- category jump nav ----------
   110 sets is a long homepage. This is the table of contents, and it doubles as
   the internal-link hub a crawler follows to every cluster anchor. */
.jump{display:flex;flex-wrap:wrap;gap:.5rem .6rem;margin:0 0 .5rem;padding-bottom:.2rem}
.jump a{
  display:inline-flex;align-items:baseline;gap:.4rem;text-decoration:none;
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-soft);
  border:1px solid var(--rule);border-radius:2px;padding:.4rem .6rem;line-height:1
}
.jump a span{font-family:var(--mono);font-size:.68rem;letter-spacing:0;color:var(--muted)}
.jump a:hover{color:var(--ink);border-color:var(--ink-soft)}
.jump a:hover span{color:var(--rubric)}