/* ============================================================================
   Etalyn — front door
   A search instrument, not a document. Typographic system inherited from
   ETA-DOC-0002: eight palette tokens, three families, nothing else.
   ========================================================================= */

:root{
  --paper:#F4F2ED; --paper-2:#EBE8E1; --ink:#0B0B0A; --muted:#55584F;
  --rule:#C7C4BA; --rule-strong:#9A978D; --accent:#0F6B52;
  /* Bands are told apart by their number and their name, never by hue. */
  --b1:#0B0B0A; --b2:#0B0B0A; --b3:#0B0B0A; --b4:#0B0B0A; --b5:#0B0B0A; --b6:#0B0B0A;
  --serif:'Newsreader',Georgia,serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
*{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.5;-webkit-font-smoothing:antialiased}
a{color:inherit}

/* ------------------------------------------------------------------ chrome */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 24px;border-bottom:1px solid var(--rule)}
.top .brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none}
.top .brand svg{display:block}
.top .brand b{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600}
.top nav{display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.top nav a{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;padding:4px 0;
  border-bottom:1px solid transparent}
.top nav a:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* -------------------------------------------------------------------- hero */
.hero{max-width:1080px;margin:0 auto;padding:54px 24px 0}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(30px,5.2vw,52px);
  line-height:1.08;letter-spacing:-.015em;margin:0 0 12px;max-width:20ch}
.hero .sub{font-size:17px;line-height:1.5;color:var(--muted);margin:0 0 26px;max-width:58ch}
.hero .sub b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ search */
.searchwrap{position:relative;margin:0 0 14px}
.searchwrap svg.mag{position:absolute;left:18px;top:50%;transform:translateY(-50%);
  pointer-events:none;color:var(--rule-strong)}
#q{width:100%;font-family:var(--serif);font-size:clamp(20px,3.4vw,30px);font-weight:400;
  color:var(--ink);background:#FFFDF9;border:2px solid var(--ink);border-radius:0;
  padding:20px 96px 20px 56px;outline:none;line-height:1.25}
#q::placeholder{color:var(--rule-strong)}
#q:focus{box-shadow:0 0 0 3px rgba(15,107,82,.18);border-color:var(--accent)}
.clearq{position:absolute;right:14px;top:50%;transform:translateY(-50%);border:1px solid var(--rule);
  background:var(--paper);color:var(--muted);font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;cursor:pointer;display:none}
.clearq:hover{border-color:var(--ink);color:var(--ink)}
.searchwrap.has .clearq{display:block}

/* ----------------------------------------------------------------- filters */
.filters{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:0 0 8px}
.pill{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;padding:7px 12px;
  border:1px solid var(--rule);background:var(--paper);color:var(--muted);cursor:pointer;
  white-space:nowrap;transition:none}
.pill:hover{border-color:var(--rule-strong);color:var(--ink)}
.pill[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pill.solo[aria-pressed="true"]{background:var(--accent);border-color:var(--accent)}
.filters .sep{width:1px;height:22px;background:var(--rule);margin:0 4px}
.morebtn{font-family:var(--mono);font-size:11.5px;color:var(--accent);background:none;
  border:none;cursor:pointer;text-decoration:underline;padding:7px 2px}
.more{display:none;flex-wrap:wrap;gap:7px;padding:10px 0 2px;border-top:1px solid var(--rule);
  margin-top:4px;width:100%}
.more.open{display:flex}
.more .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);width:100%;margin:2px 0 -2px}

/* ------------------------------------------------------------------ counts */
.countbar{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;border-top:1px solid var(--rule);margin-top:14px;padding:12px 0 0}
.countbar .n{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--muted)}
.countbar .n b{color:var(--ink);font-variant-numeric:tabular-nums}
.sortsel{font-family:var(--mono);font-size:11.5px;color:var(--muted);background:var(--paper);
  border:1px solid var(--rule);padding:6px 8px;cursor:pointer}

/* ----------------------------------------------------------------- results */
main{max-width:1080px;margin:0 auto;padding:0 24px 90px}
.res{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px;
  margin:16px 0 0;list-style:none;padding:0}
.card{border:1px solid var(--rule);background:#FFFDF9;padding:15px 16px 14px;
  display:flex;flex-direction:column;gap:9px;text-decoration:none;position:relative}
.card:hover{border-color:var(--ink)}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card .nm{font-family:var(--serif);font-size:19px;line-height:1.2;letter-spacing:-.01em;
  color:var(--ink);margin:0}
.card .band{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.03em;color:var(--muted)}
.dot{width:9px;height:9px;flex:none;border-radius:50%;background:var(--b6)}
.b1 .dot{background:var(--b1)}.b2 .dot{background:var(--b2)}.b3 .dot{background:var(--b3)}
.b4 .dot{background:var(--b4)}.b5 .dot{background:var(--b5)}.b6 .dot{background:var(--b6)}
.card .band .bn{color:var(--ink);font-weight:500}
.card .plain{font-family:var(--serif);font-size:15px;line-height:1.5;color:var(--ink);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .claim{font-size:12px;line-height:1.4;color:var(--muted);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .claiml{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--rule-strong);margin-bottom:2px}
.card .foot{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:auto;min-width:0;
  padding-top:9px;border-top:1px solid var(--rule)}
.mk{font-family:var(--mono);font-size:10px;letter-spacing:.06em;padding:2px 5px;
  border:1px solid var(--rule-strong);color:var(--muted)}
.mk.tier{color:var(--paper);border-color:transparent}
.tA,.tB,.tC,.tD,.tE{background:var(--ink)}
.dosetag{font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:var(--accent);
  border:1px solid var(--accent);padding:2px 6px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%}
.grp{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--rule-strong);margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%;flex:0 1 auto}

/* ungraded rows are deliberately quieter than graded cards */
.rows{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--rule)}
.row{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--rule);
  text-decoration:none;color:inherit}
.row:hover{background:var(--paper-2)}
.row .nm{font-family:var(--serif);font-size:16px;line-height:1.25;flex:1 1 auto;min-width:0;
  overflow-wrap:anywhere}
.row .tags{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;flex:none}
.tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;border:1px solid var(--rule);
  color:var(--muted);padding:2px 5px;white-space:nowrap}
.row .ng{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--rule-strong);flex:none}

.sect{margin:34px 0 0}
.sect h2{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:400;margin:0 0 2px;padding-bottom:9px;
  border-bottom:1px solid var(--rule-strong)}
.sect .note{font-size:13px;color:var(--muted);margin:9px 0 0}

.empty{border:1px dashed var(--rule-strong);padding:26px;text-align:center;margin:22px 0 0}
.empty p{margin:0 0 6px;font-family:var(--serif);font-size:19px}
.empty .s{font-size:14px;color:var(--muted);font-family:var(--sans)}
.loading{font-family:var(--mono);font-size:11.5px;color:var(--rule-strong);
  letter-spacing:.05em;padding:14px 0}
.morebar{display:block;width:100%;margin:14px 0 0;padding:12px;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;background:var(--paper);
  border:1px solid var(--rule-strong);color:var(--ink);cursor:pointer}
.morebar:hover{background:var(--ink);color:var(--paper)}

/* ------------------------------------------------------------------ footer */
.foot-doc{border-top:1px solid var(--rule);margin-top:40px;padding:20px 24px 60px;
  max-width:1080px;margin-left:auto;margin-right:auto}
.foot-doc p{font-size:12.5px;line-height:1.6;color:var(--muted);margin:0 0 8px;max-width:78ch}
.foot-doc a{color:var(--accent)}
.kbd{font-family:var(--mono);font-size:10.5px;border:1px solid var(--rule);
  padding:1px 5px;color:var(--muted);background:var(--paper-2)}

@media (max-width:700px){
  /* the document links are secondary on a phone: one quiet scrollable strip
     under the wordmark, never competing with the search field */
  .top{padding:10px 0 0;flex-direction:column;align-items:stretch;gap:0}
  .top .brand{padding:0 16px 9px}
  .top nav{justify-content:flex-start;gap:0;flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    border-top:1px solid var(--rule);padding:0 16px}
  .top nav::-webkit-scrollbar{display:none}
  .top nav a{padding:9px 14px 9px 0;white-space:nowrap;flex:none}
  .hero{padding:24px 16px 0}
  .hero h1{font-size:clamp(27px,7.6vw,34px)}
  .hero .sub{font-size:15.5px;margin-bottom:20px}
  main{padding:0 16px 70px}
  #q{padding:15px 78px 15px 44px;font-size:19px}
  .searchwrap svg.mag{left:14px;width:18px;height:18px}
  .clearq{right:10px;padding:6px 8px}

  /* the swipeable filter row bleeds past the gutter by design; clip at the
     document edge so it cannot widen the page. `clip` rather than `hidden`,
     which would break position:sticky in the header. */
  html,body{overflow-x:clip}

  /* filters stay one swipeable row so results are not pushed off the screen */
  .filters{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:0 16px 2px}
  .filters::-webkit-scrollbar{display:none}
  .pill{flex:none}
  .more{flex-wrap:wrap;overflow:visible}
  .more.open{display:flex}
  .morebtn{flex:none}
  .countbar{margin-top:12px}

  .res{grid-template-columns:1fr}
  .card{padding:14px}
  .card .nm{font-size:18px}
  .card .foot{flex-wrap:wrap;gap:6px}
  .grp{margin-left:0;width:100%;order:9}
  .dosetag{max-width:calc(100% - 4px)}
  .row .tags{display:none}
  .foot-doc{padding:18px 16px 50px}
}
@media (prefers-reduced-motion:no-preference){
  .card,.row{transition:border-color .12s ease,background .12s ease}
}

/* ------------------------------------------------------ alias attribution
   A result found through an alias says so, and names the register the alias
   was read from. A reader should never have to guess why a row is on screen. */
.via{display:block;margin:3px 0 0;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.02em;color:var(--muted);text-transform:none;line-height:1.35}
.row .via{margin-top:2px}
.card .via{margin-bottom:6px}

/* A slang term that names a whole class, not one substance. Stated plainly
   and once, above the results it produced. */
.classnote{border:1px solid var(--ink);border-left-width:4px;padding:12px 16px;
  margin:0 0 22px;font-size:14.5px;line-height:1.5;max-width:72ch}
.classnote b{font-weight:600}

.band{display:inline-flex;align-items:baseline;gap:9px;font-family:var(--sans);font-size:13px}
.band .bn{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;
  border:1px solid var(--rule-strong);padding:1px 6px;white-space:nowrap;color:var(--ink)}
.band .bw{color:var(--muted)}