/* =========================================================
   飲んだ夜 — 一覧とタイムライン
   地図のページと同じ約束で組む（白地／黒の丸ゴシック／青は点で）。
   時刻は Outfit、本文は Zen Maru Gothic。面と影ではなく線と円。
   ========================================================= */

.nightspage{ background:var(--paper); overscroll-behavior:auto }

/* ---------- 上のバー ---------- */
.top{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.top__home{
  display:flex; align-items:center; gap:9px; text-decoration:none;
  max-width:760px; margin:0 auto; padding:9px 18px;
}
.top__back{ display:flex; color:var(--ink-2); flex:none }
.top__logo{ height:22px; width:auto; display:block }
@media (min-width:700px){ .top__logo{ height:26px } .top__home{ padding:12px 18px } }

.wrap{ max-width:760px; margin:0 auto; padding:26px 18px 64px }
.loading{ color:var(--ink-3); padding:40px 0; text-align:center }

/* ---------- 見出し ---------- */
.hd{ margin-bottom:22px }
.hd__ttl{
  font-size:clamp(23px,2.2vw,30px); font-weight:700; letter-spacing:.04em;
  line-height:1.4; display:flex; align-items:center; gap:10px;
}
.hd__ttl .icon{ color:var(--blue) }
.hd__en{
  font-family:'Outfit',system-ui,sans-serif; font-size:11.5px; font-weight:400;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); margin-top:2px;
}
.hd__lead{ color:var(--ink-2); font-size:var(--t-small); margin-top:10px; max-width:34em }

/* ---------- 夜の一覧 ---------- */
.nights{ margin-top:8px }
.nc{
  position:relative; display:grid; grid-template-columns:58px 1fr 78px; gap:14px;
  align-items:start; width:100%; text-align:left; text-decoration:none;
  padding:17px 12px; border-radius:20px;
  transition:background .18s var(--ease);
}
.nc--nophoto{ grid-template-columns:58px 1fr }
/* 行の区切りは角丸に巻き込まれないよう、内側に引いた1本で */
.nc + .nc::before{
  content:''; position:absolute; left:12px; right:12px; top:0; height:1px;
  background:var(--rule);
}
.nc:hover{ background:var(--paper-2) }
.nc:hover::before, .nc:hover + .nc::before{ background:transparent }
.nc__date{ font-family:'Outfit',system-ui,sans-serif; text-align:center; padding-top:2px }
.nc__md{ display:block; font-size:19px; font-weight:500; letter-spacing:.01em; line-height:1.15 }
.nc__y{ display:block; font-size:10.5px; color:var(--ink-3); letter-spacing:.1em; margin-top:3px }
.nc__dow{
  display:block; font-family:'Zen Maru Gothic',sans-serif; font-size:10.5px;
  color:var(--ink-3); margin-top:1px;
}
.nc__ttl{ display:block; text-decoration:none; font-size:var(--t-name); font-weight:500; line-height:1.5 }
.nc__lead{ display:block; color:var(--ink-2); font-size:var(--t-small); margin-top:3px }
.nc__route{
  display:block; color:var(--ink-2); font-size:var(--t-small); margin-top:7px; line-height:1.7;
}
.nc__route i{ font-style:normal; color:var(--ink-3); padding:0 .35em }
.nc__meta{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:9px;
  font-family:'Outfit',system-ui,sans-serif; font-size:11px; color:var(--ink-2);
}
.nc__meta span{
  border:1px solid var(--rule-2); border-radius:var(--r-pill); padding:1px 9px;
  letter-spacing:.04em;
}
.nc__meta span.is-jp{ font-family:'Zen Maru Gothic',sans-serif; letter-spacing:.02em }
.nc__photo{
  width:78px; height:78px; border-radius:18px; overflow:hidden; background:var(--paper-2);
  border:1px solid var(--rule);
}
.nc__photo img{ width:100%; height:100%; object-fit:cover; display:block }
@media (max-width:560px){
  .nc{ grid-template-columns:50px 1fr 62px; gap:11px }
  .nc__photo{ width:62px; height:62px; border-radius:15px }
  .nc__md{ font-size:17px }
}

/* ---------- 夜のページ ---------- */
.nd__back{
  display:inline-flex; align-items:center; gap:5px; color:var(--ink-2);
  font-size:var(--t-small); text-decoration:none; margin-bottom:16px;
}
.nd__back:hover{ color:var(--ink) }
.nd__date{
  font-family:'Outfit',system-ui,sans-serif; font-size:12px; letter-spacing:.16em;
  color:var(--ink-3); text-transform:uppercase;
}
.nd__date b{ font-weight:500; color:var(--ink-2) }
.nd__title{
  font-size:clamp(21px,2.2vw,28px); font-weight:700; line-height:1.5; margin-top:6px;
  letter-spacing:.03em;
}
.nd__lead{ color:var(--ink-2); margin-top:9px }
.nd__hero{
  margin:20px 0 0; border-radius:22px; overflow:hidden; background:var(--paper-2);
  border:1px solid var(--rule); aspect-ratio:16/10;
}
.nd__hero img{ width:100%; height:100%; object-fit:cover; display:block }

.nd__stats{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px }
.nd__stats span{
  display:inline-flex; align-items:center; gap:5px;
  border:1px solid var(--rule-2); border-radius:var(--r-pill); padding:3px 12px;
  font-size:11.5px; color:var(--ink-2); letter-spacing:.03em;
}
.nd__stats span .icon{ color:var(--blue) }
.nd__stats .en{ font-family:'Outfit',system-ui,sans-serif; letter-spacing:.05em }

.nd__map{
  height:230px; margin-top:16px; border-radius:22px; overflow:hidden;
  border:1px solid var(--rule); background:var(--map-bg); position:relative;
}
@media (min-width:700px){ .nd__map{ height:300px } }
.nd__map .maplibregl-ctrl-attrib,
.nd__map .maplibregl-ctrl-logo{ display:none !important }
.nd__mapnote{
  font-size:11px; color:var(--ink-3); margin-top:7px; text-align:right;
}
.nd__mapnote a{ color:inherit }

/* 地図に置く番号つきの点。ロゴと同じで、白フィル＋色の輪郭 */
.stopdot{
  width:26px; height:26px; border-radius:50%; background:#fff;
  border:2.4px solid var(--c,#14141A); color:var(--c,#14141A);
  font-family:'Outfit',system-ui,sans-serif; font-size:12.5px; font-weight:500;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 1px 4px rgba(20,20,26,.14);
}
.stopdot.is-on{ background:var(--c,#14141A); color:#fff }

/* ---------- その夜のかたち（帯） ---------- */
.arc{
  display:flex; align-items:stretch; height:54px; margin-top:14px;
  border-radius:27px; overflow:hidden; background:var(--paper-2);
  border:1px solid var(--rule);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.arc::-webkit-scrollbar{ display:none }
.arc__seg{
  position:relative; min-width:58px; padding:0 10px; text-align:left;
  background:var(--c-soft); border:0; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; gap:1px;
  transition:filter .18s var(--ease);
}
.arc__seg::before{
  content:''; position:absolute; left:0; top:8px; bottom:8px; width:2.5px;
  border-radius:2px; background:var(--c);
}
.arc__seg:hover{ filter:brightness(.96) }
.arc__seg b{
  font-size:11.5px; font-weight:500; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; padding-left:7px;
}
.arc__seg i{
  font-family:'Outfit',system-ui,sans-serif; font-style:normal; font-size:10px;
  color:var(--ink-3); padding-left:7px; letter-spacing:.04em;
}
.arc__gap{ flex:0 0 7px; min-width:7px; background:var(--paper) }

/* ---------- タイムライン ---------- */
.tl{ margin-top:28px }
.tl__row{ display:grid; grid-template-columns:52px 34px 1fr; gap:0 10px }
.tl__t{
  font-family:'Outfit',system-ui,sans-serif; text-align:right; padding-top:4px;
  letter-spacing:.01em;
}
.tl__t b{ display:block; font-size:15px; font-weight:500; color:var(--ink) }
.tl__t small{ display:block; font-size:11px; color:var(--ink-3); margin-top:3px }
.tl__rail{ position:relative; display:flex; justify-content:center }
.tl__rail::before{
  content:''; position:absolute; top:0; bottom:0; left:50%; width:1px;
  background:var(--rule-2); transform:translateX(-.5px);
}
.tl__row:first-child .tl__rail::before{ top:16px }
.tl__dot{
  position:relative; z-index:1; width:32px; height:32px; border-radius:50%;
  background:var(--paper); border:2.2px solid var(--c,#14141A); color:var(--c,#14141A);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.tl__dot--end{
  width:15px; height:15px; margin-top:8px; border-style:dashed;
  border-color:var(--rule-2);
}
.tl__card{ padding:0 0 26px 2px; scroll-margin-top:80px }
.tl__no{
  font-size:10.5px; letter-spacing:.1em; color:var(--c,var(--ink-3)); margin-top:4px;
}
.tl__name{
  display:inline-block; font-size:clamp(17px,1.4vw,20px); font-weight:700; line-height:1.45;
  text-decoration:none; margin-top:1px;
}
a.tl__name{ text-decoration:underline; text-decoration-color:var(--rule-2);
  text-underline-offset:4px; text-decoration-thickness:1px }
a.tl__name:hover{ text-decoration-color:var(--c) }
.tl__meta{
  font-size:var(--t-small); color:var(--ink-3); margin-top:4px; display:flex;
  flex-wrap:wrap; gap:0 4px;
}
.tl__meta span{ color:var(--rule-2) }
.tl__note{ margin-top:9px }
.tl__note p{ line-height:1.95 }
.tl__note p + p{ margin-top:.7em }

.tl__shots{ margin-top:12px }
.tl__big{
  margin:0; border-radius:20px; overflow:hidden; background:var(--paper-2);
  border:1px solid var(--rule); aspect-ratio:16/11;
}
.tl__big img{ width:100%; height:100%; object-fit:cover; display:block }
.tl__strip{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:6px; margin-top:6px;
}
.tl__strip figure{
  margin:0; border-radius:13px; overflow:hidden; background:var(--paper-2);
  border:1px solid var(--rule); aspect-ratio:1/1;
}
.tl__strip img{ width:100%; height:100%; object-fit:cover; display:block }

.tl__gap{ display:grid; grid-template-columns:52px 34px 1fr; gap:0 10px; margin-top:-20px }
.tl__gap .tl__rail::before{
  background:none; border-left:1px dashed var(--rule-2); width:0; left:50%;
}
.tl__gapt{
  font-size:11.5px; color:var(--ink-3); padding:5px 0 20px; letter-spacing:.02em;
}
.tl__gapt span{ color:var(--rule-2); padding-left:.5em }
.tl__end{ display:grid; grid-template-columns:52px 34px 1fr; gap:0 10px }
.tl__end .tl__t b{ color:var(--ink-3) }
.tl__endt{ font-size:var(--t-small); color:var(--ink-3); padding-top:6px }

/* ---------- あとがき ---------- */
.nd__after{
  margin-top:6px; padding:20px 22px; border:1px solid var(--rule);
  border-radius:22px; background:var(--paper-2);
}
.nd__after .secttl{ margin-bottom:8px }
.nd__after p + p{ margin-top:.8em }

.secttl{
  font-size:12px; letter-spacing:.1em; color:var(--ink-2); display:flex;
  align-items:center; gap:6px;
}
.secttl__en{ font-family:'Outfit',system-ui,sans-serif; font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3) }

.nd__nav{ display:flex; justify-content:space-between; gap:12px; margin-top:30px }
.nd__nav a{
  font-size:var(--t-small); color:var(--ink-2); text-decoration:none;
  border:1px solid var(--rule-2); border-radius:var(--r-pill); padding:6px 15px;
}
.nd__nav a:hover{ border-color:var(--ink-3); color:var(--ink) }

/* ---------- 空 ---------- */
.blank{
  text-align:center; color:var(--ink-3); padding:56px 20px; border:1px dashed var(--rule-2);
  border-radius:24px; line-height:2;
}

.foot{
  max-width:760px; margin:0 auto; padding:0 18px 46px; color:var(--ink-3);
  font-size:var(--t-small);
}
.foot .byline{ padding-top:20px; border-top:1px solid var(--rule) }
.foot .note{ margin-top:6px; font-size:11px }