/* cowaza.tokyo — 深夜の峠 ------------------------------------
   夜色ベース + 琥珀の灯り。全ページ共通スタイル。
   色や文字サイズを変えたいときは、このファイルだけ直せばOK。 */

:root{
  --yoro:#0d1016;      /* 夜路: 背景 */
  --rokata:#141a24;    /* 路肩: パネル */
  --hone:#e6e3dc;      /* 骨: 本文 */
  --moya:#8a92a0;      /* 靄: 補助テキスト */
  --akari:#e2a24e;     /* 灯: アクセント */
  --kei:#242c39;       /* 罫: 線 */
  --sans:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic","Noto Sans JP",sans-serif;
  --serif:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{
  margin:0;
  background:radial-gradient(1100px 480px at 72% -12%, #131a26 0%, rgba(19,26,38,0) 60%), var(--yoro);
  color:var(--hone);
  font-family:var(--sans);
}
a{color:inherit;text-decoration:none}
::selection{background:var(--akari);color:#171208}
img{max-width:100%;height:auto;display:block}

/* --- 共通パーツ --------------------------------------------- */
.horizon{
  height:1px;margin-top:18px;
  background:linear-gradient(90deg,var(--akari),rgba(226,162,78,.06) 55%,rgba(226,162,78,0));
  transform-origin:left;animation:draw 1.1s ease-out both;
}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.horizon{animation:none}}

.top{
  max-width:42rem;margin:0 auto;padding:24px 22px 0;
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:12px;letter-spacing:.24em;color:var(--moya);
}
.top a:hover,.top a:focus-visible{color:var(--akari)}

article{max-width:42rem;margin:0 auto;padding:36px 22px 64px}
header.page{margin-bottom:8px}
.series{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(24px,6vw,32px);letter-spacing:.06em;
  margin:0 0 10px;
}
.code{font-family:var(--mono);font-size:13px;letter-spacing:.32em;color:var(--akari)}

/* --- 本文(連載・詞) ----------------------------------------- */
.body{
  margin-top:40px;
  font-family:var(--serif);
  font-size:17px;line-height:2.05;letter-spacing:.02em;
}
.body p{margin:0}
.blk{margin:0 0 1.7em}
.gap{margin-top:3.4em}

/* --- ページ送り --------------------------------------------- */
.pager{max-width:42rem;margin:0 auto;padding:0 22px 60px}
.pager .line{
  border-top:1px solid var(--kei);padding-top:22px;
  display:flex;justify-content:space-between;gap:16px;font-size:14px;
}
.pager a{color:var(--moya)}
.pager a:hover,.pager a:focus-visible{color:var(--akari)}

/* --- 目次 --------------------------------------------------- */
.toc{margin-top:34px;display:flex;flex-direction:column}
.toc-item{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:15px 2px;border-bottom:1px solid var(--kei);
  transition:color .2s,border-color .2s;
}
.toc-item:hover,.toc-item:focus-visible{color:var(--akari);border-color:var(--akari)}
.t-label{font-family:var(--mono);font-size:15px;letter-spacing:.22em}
.t-title{font-family:var(--serif);font-size:17px;letter-spacing:.04em}
.t-date{font-family:var(--mono);font-size:12px;letter-spacing:.24em;color:var(--moya);flex-shrink:0}
.toc-item:hover .t-date{color:var(--akari)}
.toc-item.ext .t-title::after{content:" ↗";color:var(--moya);font-size:.8em}

/* --- ログページ(音声・画像) --------------------------------- */
.player{width:100%;margin-top:30px}
figure{margin:28px 0 0}
audio{filter:invert(.88) hue-rotate(180deg)}

/* --- 曲一覧 -------------------------------------------------- */
.tracks{margin-top:26px}
.track{padding:20px 0 24px;border-bottom:1px solid var(--kei)}
.t-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:12px}
.track .t-title{font-family:var(--serif);font-size:18px;letter-spacing:.05em}
.track .t-title:hover{color:var(--akari)}
.t-file{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--moya);flex-shrink:0}
.t-file:hover{color:var(--akari)}
.track audio{width:100%;height:36px}

/* --- トップページ -------------------------------------------- */
body.home{min-height:100svh;display:flex;flex-direction:column}
body.home header{width:100%;max-width:960px;margin:0 auto;padding:36px 22px 0}
.brand{font-family:var(--mono);font-size:13px;letter-spacing:.45em;color:var(--moya)}
body.home main{flex:1;display:flex;align-items:center;justify-content:center;padding:44px 14px 34px}
.shelf{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.spine{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  height:300px;min-width:60px;padding:20px 16px;
  display:grid;place-content:center;
  background:var(--rokata);
  border:1px solid var(--kei);border-radius:3px;
  font-family:var(--serif);font-size:16px;font-weight:500;
  letter-spacing:.26em;line-height:1.7;
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
.spine:hover{
  border-color:var(--akari);
  box-shadow:0 0 0 1px rgba(226,162,78,.22),0 12px 32px -18px rgba(226,162,78,.5);
  transform:translateY(-3px);
}
.spine:focus-visible{outline:2px solid var(--akari);outline-offset:2px}
.spine.en{font-family:var(--mono);font-size:13px;letter-spacing:.34em}
body.home footer{
  width:100%;max-width:960px;margin:0 auto;padding:0 22px 28px;
  color:var(--moya);font-family:var(--mono);font-size:11px;letter-spacing:.32em;
}

/* --- スマホ -------------------------------------------------- */
@media (max-width:640px){
  .body{font-size:16.5px;line-height:2.1}
  body.home main{padding:34px 12px 26px}
  .shelf{gap:12px;width:100%;max-width:430px}
  .spine{height:min(66vw,252px);font-size:14px;letter-spacing:.2em;padding:16px 13px}
  .spine.en{font-size:12px;letter-spacing:.28em}
}

/* mp3ページの小見出し */
.sec{
  font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.14em;
  color:var(--moya);margin:44px 0 4px;
}
.t-file.solo{font-size:13px}

/* 歌詞ページ(word.html)の曲見出し */
.song-t{
  font-family:var(--serif);font-weight:600;font-size:19px;
  letter-spacing:.1em;margin:58px 0 0;
}
.song .body{margin-top:22px}