.filters{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0 22px;max-width:var(--wide);margin:0 0 6px}
.chip{border:0;background:none;color:var(--muted);font:500 15px var(--font);padding:0;border-radius:0;
  min-height:44px;display:inline-flex;align-items:center;cursor:pointer;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:6px;text-decoration-thickness:1.5px;
  transition:color .15s,text-decoration-color .15s}
.chip:hover{color:var(--ink)}
.chip[aria-pressed="true"]{background:none;color:var(--ink);text-decoration-color:var(--accent)}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.filters{margin-bottom:var(--gap)}
.letters{display:flex;gap:26px;align-items:flex-start;max-width:var(--wide);margin:0 auto}
.lcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:26px}
@media (max-width:700px){ .letters,.lcol{gap:20px} }
.nq{margin:0}
.bubble{position:relative;margin:0;background:var(--letter-bg);box-shadow:var(--letter-shadow);border-radius:var(--r-bubble);padding:28px 28px 24px;font-family:var(--quote-font);font-size:17px;line-height:1.46}
.bubble::after{content:"";position:absolute;left:34px;bottom:-12px;border-style:solid;border-width:13px 22px 0 4px;border-color:var(--letter-bg) transparent transparent transparent}
.bubble p{margin:0 0 .7em} .bubble p:last-child{margin-bottom:0}
.qg{font-family:Georgia,serif;font-size:1.9em;line-height:0;color:var(--faint);vertical-align:-.34em;margin-right:.06em}
.qg.end{margin:0 0 0 .06em}
.hook{font-weight:var(--hook-weight);color:var(--ink)}
.rm{display:block;margin-top:14px;padding:0;border:0;background:none;font:500 14.5px var(--font);color:var(--accent);cursor:pointer}
.nq figcaption{display:flex;align-items:center;gap:12px;padding:22px 0 6px 28px;font-size:14px;line-height:1.3;color:var(--ink);font-weight:700}
.face{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--section-bg),0 2px 8px rgba(0,0,0,.14)}
.empty{text-align:center;color:var(--muted);padding:40px 0}

.more{text-align:center;margin-top:32px}
.more[hidden]{display:none}
.more .btn,.read .more .btn{display:inline-block;position:relative;margin:0;border:0;cursor:pointer;
  font:500 15px var(--font);padding:4px 10px;border-radius:6px;background:var(--link-hover);color:var(--accent)}
.more .btn::before,.read .more .btn::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.more .btn::after,.read .more .btn::after{content:none}
@media (hover:hover){ .more .btn:hover,.read .more .btn:hover{filter:none;background:var(--mark)} }
.more .btn,.read .more .btn{background:color-mix(in srgb, var(--accent) 78%, var(--band-c));color:var(--accent-ink)}
@media (hover:hover){ .more .btn:hover,.read .more .btn:hover{background:color-mix(in srgb, var(--accent) 90%, var(--band-c))} }
.more .btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.bubble:has(.rm){cursor:pointer}

.fdock{position:fixed;z-index:55;background:var(--card);border-radius:12px;
  box-shadow:0 8px 28px rgba(6,40,52,.20),0 1px 3px rgba(6,40,52,.14);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.fdock.on{opacity:1;visibility:visible}
.fdock:not(.open){background:color-mix(in srgb,var(--letter-bg) 82%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.fd-btn{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 18px;border:0;background:none;
  font:600 15px var(--font);color:var(--ink);cursor:pointer}
.fd-btn .chev{display:inline-block;color:var(--accent);transition:transform .2s}
.fdock.open .fd-btn .chev{transform:rotate(90deg)}
.fd-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:12px}
.fd-panel.filters{margin:0;padding:0 20px 14px;overflow:auto;overscroll-behavior:contain}
.fd-panel[hidden]{display:none}

.filters.rows{display:block}
.frow{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px}
.frow-t{flex:0 0 auto;min-width:7.5em;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
@media (max-width:700px){ .frow-t{flex-basis:100%;margin-top:14px} .frow:first-child .frow-t{margin-top:0} }

[data-measure="read"] .filters,[data-measure="read"] .letters,[data-measure="read"] .intro{max-width:var(--read);margin-left:0;margin-right:0}

.scroller{position:fixed;right:max(var(--gutter), calc((100vw - var(--wide)) / 2));bottom:calc(22px + env(safe-area-inset-bottom, 0px));z-index:50;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.scroller.on{opacity:1;visibility:visible}
.sc-btn{display:inline-block;cursor:pointer;border:0;border-radius:6px;padding:12px 16px;
  font:500 15px/1 var(--font);color:var(--accent-ink);background:color-mix(in srgb, var(--accent) 78%, var(--band-c));
  box-shadow:0 4px 16px rgba(6,40,52,.22),0 1px 3px rgba(6,40,52,.14);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;transition:filter .2s,box-shadow .2s}
@media (hover:hover){ .sc-btn:hover{background:color-mix(in srgb, var(--accent) 90%, var(--band-c));box-shadow:0 6px 20px rgba(6,40,52,.26),0 1px 3px rgba(6,40,52,.16)} }
.sc-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.scroller.hint .sc-btn{animation:sc-pulse 2.6s ease-out infinite}
@keyframes sc-pulse{
  0%{box-shadow:0 4px 16px rgba(6,40,52,.22),0 0 0 0 rgba(0,97,127,.35)}
  60%{box-shadow:0 4px 16px rgba(6,40,52,.22),0 0 0 12px rgba(0,97,127,0)}
  100%{box-shadow:0 4px 16px rgba(6,40,52,.22),0 0 0 0 rgba(0,97,127,0)}}
@media (prefers-reduced-motion: reduce){ .scroller.hint .sc-btn{animation:none} }
.totop{margin:36px 0 0;text-align:left}    
.letters-static{display:none}