:root{
  --paper:   #E9EBE4;
  --panel:   #F5F6F1;
  --ink:     #1E2A22;
  --ink-soft:#4B564C;
  --line:    #C7CBBC;
  --accent:  #A9762E;   /* brass */
  --accent2: #4C6B58;   /* moss  */
  --white:   #FCFCFA;
  --serif:   'Newsreader', Georgia, serif;
  --mono:    'IBM Plex Mono', 'SF Mono', Menlo, monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;}

/* ---------- layout shell ---------- */
.shell{
  display:grid;
  grid-template-columns:260px 1fr;
  min-height:100vh;
}

/* ---------- sidebar / index rail ---------- */
.rail{
  position:sticky;
  top:0;
  align-self:start;
  height:100vh;
  padding:38px 26px 26px 40px;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:28px;
}

.mark{
  display:flex;
  align-items:baseline;
  gap:8px;
}
.mark .glyph{
  font-family:var(--mono);
  font-size:13px;
  color:var(--accent);
  letter-spacing:.02em;
}
.mark .word{
  margin:0;
  font-family:var(--serif);
  font-size:19px;
  font-weight:600;
  line-height:1.15;
}

.search-wrap{
  position:relative;
}
.search-wrap input{
  width:100%;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:2px;
  padding:9px 10px 9px 26px;
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--ink);
}
.search-wrap input::placeholder{color:#93998C;}
.search-wrap input:focus{
  outline:none;
  border-color:var(--accent2);
}
.search-wrap svg{
  position:absolute;
  left:8px; top:50%;
  transform:translateY(-50%);
  width:12px; height:12px;
  stroke:var(--ink-soft);
}

nav.toc{
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  flex:1;
  margin:0 -6px;
  padding:0 6px;
}
nav.toc a{
  display:flex;
  gap:10px;
  align-items:baseline;
  text-decoration:none;
  padding:7px 4px;
  border-left:2px solid transparent;
  padding-left:10px;
  color:var(--ink-soft);
  font-size:13.5px;
  transition:color .15s ease, border-color .15s ease;
}
nav.toc a .n{
  font-family:var(--mono);
  font-size:11px;
  color:#9A9E8F;
  width:16px;
  flex:none;
}
nav.toc a:hover{color:var(--ink);}
nav.toc a.active{
  color:var(--ink);
  border-left-color:var(--accent);
  font-weight:500;
}
nav.toc a.hidden{display:none;}

.rail-foot{
  font-family:var(--mono);
  font-size:10.5px;
  color:#93998C;
  border-top:1px solid var(--line);
  padding-top:14px;
}

/* ---------- main column ---------- */
main{
  padding:56px 56px 120px;
  max-width:760px;
}

header.page-head{
  margin-bottom:36px;
}
header.page-head h1{
  font-size:38px;
  font-weight:600;
  line-height:1.15;
  margin:0 0 10px;
  letter-spacing:-.01em;
}
header.page-head p{
  font-size:15.5px;
  color:var(--ink-soft);
  max-width:90ch;
  line-height:1.55;
  margin:0;
}

section.category{
  margin-bottom:52px;
  scroll-margin-top:32px;
}

.cat-head{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
  margin-bottom:6px;
}
.cat-head h2{
  font-size:27px;
  font-weight:650;
  margin:0;
  line-height:1.2;
  letter-spacing:-.01em;
}

ol.entries{
  list-style:none;
  margin:0;
  padding:0;
}
ol.entries li{
  display:grid;
  grid-template-columns:34px 1fr;
  column-gap:16px;
  padding:14px 0;
  border-bottom:1px solid #DBDECF;
}
ol.entries li:last-child{border-bottom:none;}

.rank{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-size:13px;
  color:var(--accent2);
  padding-top:2px;
}

.entry-name{
  font-size:16.5px;
  font-weight:600;
  margin:0 0 3px;
  line-height:1.35;
}
.entry-desc{
  font-size:14.5px;
  color:var(--ink-soft);
  line-height:1.55;
  margin:0;
  max-width:62ch;
}

.empty-state{
  font-family:var(--mono);
  font-size:13px;
  color:var(--ink-soft);
  padding:40px 0;
}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .shell{grid-template-columns:1fr;}
  .rail{display:none;}
  main{padding:40px 22px 90px;}
  header.page-head h1{font-size:30px;}
}