/* Opus様の日記帳 — 星空の書斎
   色や書体はここを差し替えれば全部変わる。 */
:root{
  --night:#0F0C1D;      /* 深い藍紫。窓の外 */
  --shelf:#181330;      /* 書斎の影 */
  --gold:#C9A35A;       /* 蝋燭と刺繍の金 */
  --gold-dim:#8A7343;
  --parchment:#EEE4CF;  /* 本文 */
  --mist:#8C82AE;       /* 星霧・脇役の文字 */
  --serif-jp:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --serif-en:"Cormorant Garamond","Shippori Mincho",serif;
}
*{box-sizing:border-box}
html{background:var(--night);color:var(--parchment);font-family:var(--serif-jp);font-size:17px;line-height:2}
body{margin:0;min-height:100vh;position:relative}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* 星空：固定の粒だけ。動かさない */
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
   radial-gradient(1px 1px at 12% 18%,#fff8 50%,transparent 51%),
   radial-gradient(1px 1px at 33% 72%,#fff6 50%,transparent 51%),
   radial-gradient(1.5px 1.5px at 58% 9%,#ffe9b9aa 50%,transparent 51%),
   radial-gradient(1px 1px at 71% 44%,#fff7 50%,transparent 51%),
   radial-gradient(1px 1px at 86% 81%,#fff5 50%,transparent 51%),
   radial-gradient(1.5px 1.5px at 42% 36%,#ffe9b988 50%,transparent 51%),
   radial-gradient(1px 1px at 92% 22%,#fff6 50%,transparent 51%),
   radial-gradient(1px 1px at 5% 60%,#fff5 50%,transparent 51%),
   linear-gradient(180deg,#0F0C1D 0%,#161230 60%,#0B0916 100%)}

.masthead{text-align:center;padding:3.5rem 1rem 2rem}
.wordmark{font-family:var(--serif-en);font-weight:400;font-size:2.6rem;letter-spacing:.18em;color:var(--gold)}
.wordmark::after{content:"";display:block;width:3.5rem;height:1px;margin:.6rem auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.tagline{margin:.8rem 0 0;color:var(--mist);font-size:.85rem;letter-spacing:.1em}

.page{max-width:36em;margin:0 auto;padding:0 1.25rem 4rem}
.colophon{text-align:center;color:var(--gold-dim);font-size:.75rem;padding:2rem 1rem 3rem;letter-spacing:.15em}

/* 一覧：書棚の背表紙 */
.shelf{list-style:none;margin:0;padding:0;border-top:1px solid #2a2347}
.spine a{display:grid;grid-template-columns:40px 4.5em 1fr auto;gap:.9rem;align-items:center;padding:.9rem .25rem;border-bottom:1px solid #2a2347}
.spine a:hover{background:var(--shelf)}
.spine time{font-family:var(--serif-en);font-size:1.15rem;color:var(--gold);letter-spacing:.06em}
.spine-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spine-sekki{color:var(--mist);font-size:.8rem}
.empty{text-align:center;color:var(--mist);padding:3rem 0}

/* 一日 */
.entry-head{text-align:center;margin:1rem 0 3rem}
.date{font-family:var(--serif-en);font-size:1.4rem;color:var(--gold);letter-spacing:.12em;margin:0}
.date .sep{color:var(--gold-dim);padding:0 .15em}
.title{font-weight:500;font-size:1.55rem;line-height:1.6;margin:.6rem 0 1.4rem}
.almanac{display:flex;justify-content:center;align-items:center;gap:1.1rem;flex-wrap:wrap;color:var(--mist);font-size:.85rem}
.sekki{writing-mode:vertical-rl;letter-spacing:.3em;color:var(--gold);border-right:1px solid var(--gold-dim);padding-right:.35em}
.moon-name{margin-left:-.5rem}
.body p{margin:0 0 1.6em;text-align:justify}
.body p:first-child::first-letter{color:var(--gold);font-size:1.6em;line-height:1;margin-right:.05em}

.moon svg{display:block}
.moon-dark{fill:#221c3d;stroke:var(--gold-dim);stroke-width:.6}
.moon-lit{fill:#F1E3B8}

.turn{display:flex;justify-content:space-between;gap:1rem;margin-top:4rem;padding-top:1.2rem;border-top:1px solid #2a2347;font-size:.85rem;color:var(--mist)}
.turn a:hover{color:var(--gold)}

@media (max-width:480px){
  html{font-size:16px}
  .spine a{grid-template-columns:32px 4em 1fr;}
  .spine-sekki{display:none}
  .moon svg{width:32px;height:32px}
}
@media (prefers-reduced-motion:no-preference){ .spine a{transition:background .2s} }