/* PlotGraph — minimal black on white, Barlow, sparing red. */
:root{
  --ink:#111;
  --paper:#fff;
  --mute:#6b6b6b;
  --faint:#9a9a9a;
  --line:#e6e6e6;
  --red:#e0261b;
  --accent:#e87b35;
  --accent-hover:#d06a2a;
  --accent-light:#fdf0e6;
  --maxw:840px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Barlow',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* ============================================================ library */
.lib-head{
  max-width:var(--maxw);
  margin:0 auto;
  padding:40px 20px 10px;
}
.brand{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:500;
  font-size:22px;
  letter-spacing:-0.02em;
  color:#1a1a1a;
}
.brand-dot{
  display:inline-block;
  width:20px;height:20px;
  border-radius:50%;
  background:var(--accent);
  flex:0 0 auto;
}
.brand-red{color:var(--accent)}
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.about-link{
  font-size:13px;font-weight:600;color:var(--mute);
  border-bottom:1px solid var(--line);padding-bottom:1px;
}
.about-link:hover{color:var(--accent-hover);border-color:var(--accent)}
.tagline{
  margin:6px 0 0;
  color:var(--mute);
  font-size:15px;
}
.controls{
  position:sticky;
  top:0;
  z-index:5;
  background:var(--paper);
  padding:16px 0 12px;
  margin-top:14px;
  border-bottom:1px solid var(--line);
}
.search{
  width:100%;
  font-family:inherit;
  font-size:16px;
  padding:11px 14px;
  border:1.5px solid var(--ink);
  border-radius:2px;
  background:var(--paper);
  color:var(--ink);
  outline:none;
}
.search:focus{border-color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.chip{
  font-family:inherit;
  font-size:12.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
  padding:6px 12px;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--mute);
  border-radius:2px;
  cursor:pointer;
}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip--on{border-color:var(--ink);background:var(--ink);color:#fff}

.grid{
  max-width:var(--maxw);
  margin:0 auto;
  padding:22px 20px 26px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:14px;
}
.card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:3px;
  padding:15px 16px 13px;
  transition:border-color .12s, transform .12s;
  background:var(--paper);
}
.card:hover{border-color:var(--ink);transform:translateY(-2px)}
.card-top{display:flex;align-items:center;gap:7px;margin-bottom:9px}
.tag{
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;
  color:var(--mute);border:1px solid var(--line);border-radius:2px;padding:2px 6px;
}
.tag--loop{color:var(--red);border-color:var(--red)}
.card-year{margin-left:auto;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.card-title{margin:0;font-size:19px;font-weight:700;letter-spacing:-0.01em;line-height:1.15}
.card-meta{font-size:12px;color:var(--faint);margin-top:2px}
.card-log{margin:9px 0 0;font-size:13.5px;color:var(--mute);flex:1}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:13px}
.spark{display:block}
.card-stats{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-size:11px;color:var(--faint)}
.card-stats span:last-child{text-transform:capitalize}
.empty{color:var(--mute);grid-column:1/-1;padding:20px 0}

.pager{
  max-width:var(--maxw);
  margin:0 auto;
  padding:4px 20px 70px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}
.pager button{
  font-family:inherit;
  font-size:12.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:0.04em;
  min-height:40px;padding:8px 16px;
  border:1px solid var(--line);border-radius:2px;
  background:var(--paper);color:var(--ink);
  cursor:pointer;
}
.pager button:hover:not(:disabled){border-color:var(--ink)}
.pager button:disabled{color:var(--faint);cursor:default}
.pager-label{
  font-size:12px;color:var(--mute);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* ============================================================ story view */
body.reading{background:var(--paper)}
.story-head{
  position:sticky;top:0;z-index:10;
  background:rgba(255,255,255,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  padding:12px 20px;
}
.story-head .back{
  font-size:13px;font-weight:600;color:var(--mute);display:inline-block;margin-bottom:6px;
}
.story-head .back:hover{color:var(--accent-hover)}
.story-title{margin:0;font-size:24px;font-weight:800;letter-spacing:-0.02em;line-height:1.1}
.story-sub{
  display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:5px;
  font-size:12.5px;color:var(--mute);
}
.story-sub span{white-space:nowrap}
.lint{font-weight:600;cursor:pointer}
.lint--ok{color:#2e7d32}
.lint--bad{color:var(--red)}
.lint-detail{
  margin-top:7px;font-size:12.5px;line-height:1.5;color:var(--mute);
  border-left:2px solid var(--line);padding-left:10px;max-width:64ch;
}

.story-log{max-width:var(--maxw);margin:0 auto;padding:22px 20px 4px}
.story-log p{margin:0;font-size:17px;line-height:1.5}

.loop-legend{
  max-width:var(--maxw);margin:12px auto 0;padding:0 20px;
  display:flex;align-items:center;gap:8px;color:var(--red);font-size:13px;font-weight:600;
}
.loop-dot{font-size:16px}

.caps{
  max-width:var(--maxw);margin:20px auto 0;padding:0 20px;
  display:flex;justify-content:space-between;
  font-size:10.5px;text-transform:uppercase;letter-spacing:0.08em;color:var(--faint);
}
.cap-c{flex:1;text-align:center}
.cap-r{text-align:right}

/* the graph */
.graph{
  position:relative;
  max-width:var(--maxw);
  margin:8px auto 0;
  padding:0 20px;
  --railpad:80px;
  --gutter:60px;
}
.overlay{position:absolute;top:0;left:20px;right:20px;pointer-events:none;overflow:visible}
.overlay.hling .thread,.overlay.hling .dot,.overlay.hling .link,.overlay.hling .loopedge{opacity:.22}
.overlay.hling .hot{opacity:1}
.thread .thread-line,.thread circle,.thread path{pointer-events:stroke}
.thread{pointer-events:auto}
.loopedge{pointer-events:auto}

.rows{position:relative}
.beat{
  position:relative;
  padding:16px var(--gutter) 16px var(--railpad);
  border-bottom:1px solid var(--line);
  transition:background .12s;
}
.beat:hover{background:#fafafa}
.beat--lit{background:var(--accent-light)}
.beat-num{
  position:absolute;
  left:0;top:16px;
  width:calc(var(--railpad) - 20px);
  text-align:right;
  padding-right:8px;
  font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums;
}
.beat-body{min-width:0}
.beat-desc{margin:0;font-size:16px;line-height:1.4}
.beat--end .beat-desc{font-weight:600}
.beat-tags{display:flex;flex-direction:column;gap:3px;margin-top:8px}
.ob{font-size:12px;line-height:1.35;color:var(--mute)}
.ob--open{color:var(--faint)}
.ob--close{color:var(--ink)}
.beat-chars{margin-top:7px;font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:0.04em}

.story-foot{
  max-width:var(--maxw);margin:0 auto;padding:26px 20px 90px;
  font-size:12.5px;color:var(--faint);line-height:1.6;max-width:60ch;
}
.foot-link{color:var(--mute);border-bottom:1px solid var(--line);white-space:nowrap}
.foot-link:hover{color:var(--accent-hover);border-color:var(--accent)}

/* ============================================================ about */
.about{max-width:640px;margin:0 auto;padding:36px 20px 90px}
.about .back{
  font-size:13px;font-weight:600;color:var(--mute);display:inline-block;margin-bottom:10px;
}
.about .back:hover{color:var(--accent-hover)}
.about h1{font-size:30px;font-weight:400;letter-spacing:-0.02em;margin:0 0 4px;line-height:1.1}
.about h2{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.09em;
  margin:36px 0 10px;
}
.about p{font-size:15.5px;line-height:1.6;color:#333;margin:0 0 12px}
.about-lede{color:var(--mute)}
.legend{list-style:none;margin:0;padding:0}
.legend li{
  display:flex;gap:16px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--line);
}
.legend .glyph{flex:0 0 34px;display:flex;justify-content:center}
.legend .glyph svg{display:block}
.legend p{font-size:14px;line-height:1.5;margin:0}
.legend b{font-weight:600}

/* ============================================================ responsive */
@media (max-width:560px){
  .lib-head{padding:26px 16px 8px}
  .brand{font-size:19px}
  .pager{padding:4px 16px 56px;gap:10px}
  .about{padding:26px 16px 70px}
  .about h1{font-size:26px}
  .story-head{padding:10px 16px}
  .story-foot{padding:22px 16px 70px}
  .grid{padding:18px 14px 20px;gap:11px;grid-template-columns:1fr}
  .story-log{padding:18px 16px 4px}
  .story-log p{font-size:15.5px}
  .caps{padding:0 16px}
  .graph{padding:0 16px}
  .overlay{left:16px;right:16px}
  .beat-desc{font-size:15px}
  .story-title{font-size:20px}
}