/* 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)}
.masthead nav{display:flex;flex-wrap:wrap;gap:.5rem 1.15rem;font-size:.8rem;letter-spacing:.04em;min-width:0}
.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)}

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
}
.sense::before{content:'\201C'}
.sense::after{content:'\201D'}

/* ---------- 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}

/* 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)}