:root{
  /* 日本の藍の階調 — indigo is named for India and dyes Japan */
  --kamenozoki:#E7EDF0;  /* 甕覗 */
  --shiro:#F6F9FA;
  --asagi:#2F7386;       /* 浅葱 */
  --ai:#2B4972;          /* 藍   */
  --kon:#1B2C4B;         /* 紺   */
  --tomekon:#0E1622;     /* 留紺 */
  --ukon:#B8850F;        /* 鬱金 — the axis, and nothing else */
  --rule:#C9D6DD;

  --mincho:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",
           "Songti SC",serif;
  --gothic:"Hiragino Sans","Yu Gothic","Noto Sans JP","Helvetica Neue",sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--kamenozoki);color:var(--tomekon);
  font-family:var(--gothic);line-height:1.7;
  font-feature-settings:"palt" 1;
}
a{color:var(--ai);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--asagi)}
:focus-visible{outline:2px solid var(--ukon);outline-offset:3px}

.wrap{max-width:52rem;margin:0 auto;padding:0 1.25rem}

/* ---- masthead ---- */
.top{padding:4rem 0 2rem;border-bottom:1px solid var(--rule)}
.top h1{
  font-family:var(--mincho);font-weight:400;
  font-size:clamp(2rem,6vw,3.1rem);line-height:1.15;
  margin:0 0 .1em;letter-spacing:.04em;
}
.top .lat{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ai);margin:0 0 1.6rem;
}
.def{
  font-family:var(--mincho);font-size:1.02rem;line-height:1.9;
  margin:0 0 1.1rem;max-width:40rem;
}
.def-en{font-size:.86rem;line-height:1.8;color:var(--kon);max-width:40rem;margin:0}
.facts{
  display:flex;flex-wrap:wrap;gap:.35rem 1.5rem;margin:1.6rem 0 0;
  padding:0;list-style:none;font-family:var(--mono);font-size:.73rem;
  letter-spacing:.06em;color:var(--ai);
}
.facts b{font-weight:600;color:var(--tomekon)}

/* ---- axis legend ---- */
.legend{
  margin:1.75rem 0 0;padding:.9rem 1.1rem;background:var(--shiro);
  border-left:2px solid var(--ukon);font-size:.8rem;line-height:1.75;
}
.legend .r{font-family:var(--gothic);letter-spacing:.24em;font-size:1rem}

/* ---- search ---- */
.tools{
  position:sticky;top:0;z-index:5;background:var(--kamenozoki);
  padding:1rem 0 .85rem;border-bottom:1px solid var(--rule);
}
.tools input{
  width:100%;padding:.6rem .8rem;border:1px solid var(--rule);
  background:var(--shiro);color:var(--tomekon);
  font-family:var(--gothic);font-size:.92rem;border-radius:0;
}
.tools input::placeholder{color:#8FA3AE}
.count{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  color:var(--ai);margin:.5rem 0 0;
}

/* ---- entries ---- */
ol.corpus{list-style:none;margin:0;padding:0}
.entry{
  padding:1.5rem 0;border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:3.4rem 1fr;gap:0 1rem;
}
.entry[hidden]{display:none}
.no{
  font-family:var(--mono);font-size:.72rem;color:var(--ai);
  padding-top:.55rem;letter-spacing:.02em;
}
.no a{text-decoration:none}
.no a:hover{text-decoration:underline}
.ja{
  font-family:var(--mincho);font-size:1.32rem;line-height:1.65;
  margin:0 0 .45rem;font-weight:400;
}
.reading{
  font-size:.86rem;letter-spacing:.24em;color:var(--kon);
  margin:0 0 .5rem;word-break:break-all;
}
.r-axis{
  color:var(--ukon);font-weight:700;
  border-bottom:2px solid var(--ukon);padding-bottom:1px;
}
.r-gap{
  display:inline-block;width:0;border-left:2px solid var(--ukon);
  height:1.05em;vertical-align:-.22em;margin:0 .11em 0 -.11em;
}
.en{font-size:.86rem;color:var(--kon);margin:0}
.meta{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  color:var(--asagi);margin:.5rem 0 0;
}

/* ---- permalink page ---- */
.solo{padding:3.5rem 0 1rem}
.solo .no{font-size:.78rem;padding:0;margin:0 0 1.5rem}
.solo .ja{font-size:clamp(1.6rem,5vw,2.4rem);line-height:1.6;margin:0 0 1rem}
.solo .reading{font-size:1rem;letter-spacing:.3em;margin:0 0 1.5rem}
.solo .en{font-size:1rem;margin:0 0 .4rem}
.dl{margin:2.5rem 0 0;border-top:1px solid var(--rule);padding-top:1.25rem}
.dl div{
  display:grid;grid-template-columns:8rem 1fr;gap:1rem;
  font-family:var(--mono);font-size:.74rem;padding:.35rem 0;
}
.dl dt{color:var(--ai);margin:0}
.dl dd{margin:0;color:var(--tomekon);word-break:break-all}
.nav{
  display:flex;justify-content:space-between;gap:1rem;
  margin:2.5rem 0 0;font-family:var(--mono);font-size:.74rem;
}

/* ---- foot ---- */
footer{
  margin-top:3rem;padding:2rem 0 4rem;border-top:1px solid var(--rule);
  font-size:.78rem;color:var(--ai);
}
footer p{margin:.3rem 0}

@media (max-width:34rem){
  .entry{grid-template-columns:1fr;gap:.4rem}
  .no{padding-top:0}
  .dl div{grid-template-columns:1fr;gap:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}