/* =========================================================
   山行ログ — 2026
   ========================================================= */

/* ---------- hero ---------- */

.log-hero{
  position:relative;
  min-height:min(70svh,600px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--night);
  color:var(--paper);
  isolation:isolate;
}
.log-hero-img{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 48%;
}
.log-hero .hero-veil{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg,rgba(8,9,7,.64) 0%,rgba(8,9,7,.16) 26%,rgba(8,9,7,.5) 56%,rgba(8,9,7,.9) 100%),
    radial-gradient(95% 85% at 4% 90%,rgba(8,9,7,.6),rgba(8,9,7,0) 66%);
}
.log-hero-inner{
  padding-top:calc(var(--head-h) + 1.6rem);
  padding-bottom:clamp(3.4rem,8vh,5.6rem);
}
.log-hero .hero-title{
  margin:1.1rem 0 0;
  font-size:clamp(2.9rem,7.4vw,5.6rem);
  line-height:1.24;
  letter-spacing:.05em;
  text-shadow:0 1px 3px rgba(8,9,7,.55),0 6px 46px rgba(8,9,7,.6);
}
.log-hero .hero-sub{
  margin:1.2rem 0 2.4rem;
  font-size:15px;
  line-height:2.1;
  color:rgba(241,237,228,.9);
  text-shadow:0 1px 16px rgba(8,9,7,.8);
}
.log-hero .hero-meta{text-shadow:0 1px 14px rgba(8,9,7,.85)}

/* ---------- shared section head ---------- */

.section-head{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1rem var(--pad);
  align-items:end;
  padding-top:.6rem;
}
.section-head .eyebrow{grid-column:1/-1}
.section-head .sec-mark{grid-column:1/-1}
.section-head h2{
  grid-column:1/7;
  margin:.8rem 0 0;
  font-family:var(--serif);
  font-size:clamp(2rem,4.2vw,3.2rem);
  line-height:1.45;
  letter-spacing:.05em;
}
.section-head p:last-child{
  grid-column:9/13;
  margin:0 0 .35rem;
  text-align:right;
  font-size:14.5px;
  line-height:2;
  color:var(--ink-soft);
}

/* ---------- summary ---------- */

.log-summary{
  background:var(--paper);
  padding:clamp(2.6rem,6vh,4rem) 0 clamp(3rem,6vh,4.5rem);
}
.stat-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 clamp(1.2rem,2.4vw,2.4rem);
  margin:clamp(2.6rem,5.5vh,4rem) 0 0;
  padding:0;
  border-top:1px solid var(--line);
}
.stat-row > div{
  padding:1.5rem 0 0;
  border-right:1px solid var(--line);
}
.stat-row > div:last-child{border-right:0}
.stat-row dt{
  font-size:12px;
  letter-spacing:.22em;
  color:var(--gold-ink);
}
.stat-row dd{
  margin:.55rem 0 0;
  font-family:var(--serif);
  font-size:clamp(1.7rem,3.2vw,2.6rem);
  line-height:1.2;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.stat-row dd .unit{
  margin-left:.32em;
  font-family:var(--sans);
  font-size:.34em;
  letter-spacing:.1em;
  color:var(--ink-soft);
}
/* 標準差のとなりに「速い／遅い」。数字だけでは意味が取れないため */
.stat-row dd .stat-word{
  display:block;
  margin-top:.5rem;
  font-family:var(--sans);
  font-style:normal;
  font-size:11px;
  letter-spacing:.16em;
  line-height:1;
  color:var(--gold-ink);
}
.stat-note{
  margin:.7rem 0 0;
  padding-right:.4rem;
  font-size:13px;
  line-height:1.85;
  color:var(--ink-soft);
}

/* ---------- pace ---------- */

.log-pace{
  background:var(--paper);
  padding:clamp(2.6rem,6vh,4rem) 0 clamp(3.2rem,7vh,5rem);
}
.pace-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1rem var(--pad);
  align-items:start;
  padding-top:.6rem;
}
.pace-grid > .eyebrow{grid-column:1/-1}
.pace-grid > .sec-mark{grid-column:1/-1}
.pace-grid > h2{
  grid-column:1/6;
  margin:.8rem 0 0;
  font-family:var(--serif);
  font-size:clamp(1.8rem,3.4vw,2.6rem);
  line-height:1.55;
  letter-spacing:.05em;
}
.pace-body{grid-column:6/13;margin-top:.9rem}
.pace-big{
  grid-column:1/6;
  margin:1.4rem 0 0;
  font-family:var(--serif);
  font-size:clamp(2.4rem,5vw,3.6rem);
  line-height:1.1;
  letter-spacing:.02em;
  color:var(--gold-ink);
  font-variant-numeric:tabular-nums;
}
.pace-big small{
  display:block;
  margin-top:.7rem;
  font-family:var(--sans);
  font-size:11.5px;
  line-height:1.8;
  letter-spacing:.06em;
  color:var(--ink-soft);
}
.pace-body p{
  margin:0 0 1.2em;
  font-size:14.5px;
  line-height:2.15;
  color:var(--ink-soft);
}
.pace-body p:last-child{margin-bottom:0}
.pace-formula{
  display:inline-block;
  margin:.1rem 0;
  padding:.1em .5em;
  background:var(--paper-2);
  font-size:.92em;
  letter-spacing:.02em;
  white-space:nowrap;
}
/* 320px の画面では式が1行に収まらず、横スクロールが出ていた。 */
@media (max-width:420px){
  .pace-formula{white-space:normal}
}

/* 年ごとの速さ（標準コースタイム÷実測の中央値） */
.pace-years{
  grid-column:6/13;
  margin-top:clamp(1.8rem,3.6vh,2.6rem);
  padding-top:1.2rem;
  border-top:1px solid var(--line);
}
.py-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.2rem .8rem;
  margin:0 0 1rem;
  font-size:13px;
  letter-spacing:.14em;
}
.py-head span{
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--ink-soft);
}
.py-list{list-style:none;margin:0;padding:0}
.py-row{
  display:grid;
  grid-template-columns:4.6rem minmax(0,1fr) 7.4rem;
  align-items:center;
  gap:.8rem;
  padding:.55rem 0;
  border-top:1px solid rgba(21,22,15,.08);
}
.py-row:first-child{border-top:0}
.py-year{
  font-family:var(--serif);
  font-size:16px;
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.py-track{
  position:relative;
  display:block;
  height:8px;
  background:rgba(21,22,15,.08);
}
.py-track i{
  position:absolute;
  inset:0 auto 0 0;
  display:block;
  background:var(--gold-ink);
  opacity:.85;
}
.py-val{
  text-align:right;
  font-family:var(--serif);
  font-size:17px;
  font-variant-numeric:tabular-nums;
}
.py-val small{
  display:block;
  font-family:var(--sans);
  font-size:10.5px;
  letter-spacing:.06em;
  color:var(--ink-soft);
}
.py-val small.py-yoy{
  margin-top:.2rem;
  color:var(--gold-ink);
  letter-spacing:.03em;
  white-space:nowrap;
}
.py-note{
  margin:.9rem 0 0;
  font-size:12px;
  letter-spacing:.04em;
  color:var(--ink-soft);
}

.pace-figures{
  grid-column:1/13;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 clamp(1.2rem,2.4vw,2.4rem);
  margin-top:clamp(2.4rem,5vh,3.6rem);
  border-top:1px solid var(--line);
}
.pf{padding:1.4rem 0 0;border-right:1px solid var(--line)}
.pf:last-child{border-right:0}
.pf-label{
  margin:0;
  font-size:13px;
  letter-spacing:.16em;
  color:var(--ink);
}
.pf-label span{
  display:block;
  margin-top:.2rem;
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--ink-soft);
}
.pf-val{
  margin:.7rem 0 0;
  font-family:var(--serif);
  font-size:clamp(1.8rem,3.2vw,2.5rem);
  line-height:1.2;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.pf-val small{
  margin-left:.22em;
  font-family:var(--sans);
  font-size:.36em;
  letter-spacing:.06em;
  color:var(--ink-soft);
}
.pf-note{
  margin:.5rem 0 0;
  padding-right:.5rem;
  font-size:13px;
  line-height:1.85;
  color:var(--ink-soft);
}

/* ---------- log list ---------- */

.log-list{
  background:var(--paper);
  padding:clamp(2rem,5vh,3rem) 0 clamp(3.5rem,8vh,6rem);
}
.log-month{margin-top:clamp(2.6rem,6vh,4rem)}
.log-month-head{
  display:flex;
  align-items:baseline;
  gap:.9rem;
  padding-bottom:.7rem;
  border-bottom:1px solid var(--ink);
}
.month-no{
  margin:0;
  font-family:var(--serif);
  font-size:1.35rem;
  font-weight:400;
  letter-spacing:.12em;
}
.month-meta{
  margin:0 0 0 auto;
  font-size:12px;
  letter-spacing:.08em;
  color:rgba(21,22,15,.62);
  font-variant-numeric:tabular-nums;
}
.month-meta span{margin:0 .5em;color:rgba(21,22,15,.3)}

.log-items{list-style:none;margin:0;padding:0}
.log-item{border-bottom:1px solid var(--line)}
.log-link{
  display:grid;
  grid-template-columns:158px minmax(0,1fr) auto;
  gap:clamp(1rem,2.2vw,2rem);
  align-items:center;
  padding:1.15rem .2rem;
  color:inherit;
}
.log-thumb{
  margin:0;
  overflow:hidden;
  background:var(--paper-2);
}
.log-thumb img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  transition:transform 1.1s var(--ease),opacity .6s var(--ease);
}
.log-date{
  margin:0;
  font-size:12px;
  letter-spacing:.14em;
  color:var(--gold-ink);
  font-variant-numeric:tabular-nums;
}
.log-title{
  margin:.24rem 0 .6rem;
  font-family:var(--serif);
  font-size:1.15rem;
  font-weight:400;
  line-height:1.7;
  letter-spacing:.04em;
}
.log-stats{
  display:flex;
  flex-wrap:wrap;
  gap:.3rem 1.5rem;
  margin:0;
}
.log-stats div{display:flex;align-items:baseline;gap:.38rem}
.log-stats dt{
  font-size:12px;
  letter-spacing:.06em;
  color:rgba(21,22,15,.64);
}
.log-stats dd{
  margin:0;
  font-family:var(--serif);
  font-size:15px;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.log-stats small{
  margin-left:.14em;
  font-family:var(--sans);
  font-size:10.5px;
  letter-spacing:.04em;
  color:var(--ink-soft);
}
/* 標準差は符号だけだと読みにくいので、速い／遅いを色でも示す */
.log-stats .gap-fast{color:var(--gold-ink)}
.log-stats .gap-slow{color:#8a4a3a}
.log-stats .gap-even{color:var(--ink-soft)}
.log-out{
  align-self:center;
  padding-bottom:.28rem;
  font-size:11px;
  letter-spacing:.16em;
  white-space:nowrap;
  color:var(--gold-ink);
  border-bottom:1px solid rgba(134,101,60,.32);
  transition:border-color .4s var(--ease),color .4s var(--ease);
}

@media (hover:hover){
  .log-link:hover .log-thumb img{transform:scale(1.05)}
  .log-link:hover .log-title{color:var(--gold-ink)}
  .log-link:hover .log-out{border-color:var(--gold-ink)}
}

/* ---------- responsive ---------- */

@media (max-width:980px){
  .section-head h2{grid-column:1/-1}
  .section-head p:last-child{grid-column:1/-1;text-align:left;margin-top:.9rem}
  .stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-row > div:nth-child(2n){border-right:0}
  .stat-row > div:nth-child(n+3){border-top:1px solid var(--line);margin-top:1.4rem}
  .pace-grid > h2{grid-column:1/-1}
  .pace-big{grid-column:1/-1;margin-top:1rem}
  .pace-body{grid-column:1/-1;margin-top:1.2rem}
  .pace-years{grid-column:1/-1;margin-top:1.6rem}
  .pace-figures{grid-template-columns:1fr;border-top:1px solid var(--line)}
  .pf{border-right:0;border-bottom:1px solid var(--line);padding:1.2rem 0}
  .pf:last-child{border-bottom:0}
}

@media (max-width:760px){
  .log-hero{min-height:min(82svh,640px)}
  .log-hero .hero-title{font-size:clamp(2.5rem,11vw,3.6rem)}
  .log-link{grid-template-columns:104px minmax(0,1fr);gap:.2rem 1rem;align-items:start;padding:1rem 0}
  .log-thumb img{aspect-ratio:4/3}
  .log-out{display:none}
  .log-main{min-width:0}
  .log-title{font-size:.96rem;margin:.18rem 0 .55rem}
  .log-stats{gap:.25rem .95rem}
  .month-meta{font-size:10px;letter-spacing:.06em}
  .stat-row{grid-template-columns:1fr}
  .stat-row > div{border-right:0;border-top:1px solid var(--line);margin-top:0;padding-top:1.15rem}
  .stat-row > div:first-child{border-top:0;padding-top:1.4rem}
  .py-row{grid-template-columns:3.4rem minmax(0,1fr) 6.8rem;gap:.55rem}
}

@media (max-width:420px){
  .log-link{grid-template-columns:88px minmax(0,1fr)}
  .log-title{font-size:.92rem;line-height:1.65}
  .log-stats{gap:.2rem .8rem}
  .log-stats dd{font-size:12px}
}

/* =========================================================
   アーカイブ — 年・月・行き先の導線
   ========================================================= */

/* ---------- year strip ---------- */

.log-years{
  background:var(--paper);
  padding:clamp(2.6rem,6vh,4rem) 0 clamp(1rem,3vh,2rem);
}
.year-strip{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 clamp(1.2rem,2.4vw,2.4rem);
  margin:clamp(2.4rem,5vh,3.4rem) 0 0;
  padding:0;
}
.year-bar{
  display:block;
  padding:1.2rem 0 0;
  border-top:1px solid var(--ink);
  transition:color .4s var(--ease);
}
.year-bar-head{
  display:flex;
  align-items:baseline;
  gap:.42rem;
}
.year-bar-head em{
  font-family:var(--serif);
  font-style:normal;
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
}
.year-bar-head strong{
  margin-left:auto;
  font-family:var(--serif);
  font-weight:400;
  font-size:1.15rem;
  font-variant-numeric:tabular-nums;
}
.year-bar-head span{
  font-size:11px;
  letter-spacing:.1em;
  color:var(--ink-soft);
}
.year-bar-track{
  display:block;
  height:2px;
  margin:.85rem 0 .7rem;
  background:rgba(21,22,15,.12);
  overflow:hidden;
}
.year-bar-track i{
  display:block;
  height:100%;
  background:var(--gold-ink);
  transform-origin:left;
  transition:transform 1.1s var(--ease);
}
.year-bar-nums{
  display:flex;
  flex-wrap:wrap;
  gap:0 .45em;
  font-size:11.5px;
  letter-spacing:.08em;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.year-bar-nums span{color:rgba(21,22,15,.3)}
@media (hover:hover){
  .year-bar:hover .year-bar-track i{transform:scaleX(1.04)}
  .year-bar:hover .year-bar-head em{color:var(--gold-ink)}
}

/* ---------- year jump chips ---------- */

.year-jump{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:clamp(1.8rem,4vh,2.6rem) 0 0;
}
.year-jump a{
  display:inline-flex;
  align-items:baseline;
  gap:.5em;
  padding:.55rem 1rem;
  border:1px solid var(--line);
  font-family:var(--serif);
  font-size:14px;
  letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
  transition:border-color .4s var(--ease),background .4s var(--ease),color .4s var(--ease);
}
.year-jump a em{
  font-family:var(--sans);
  font-style:normal;
  font-size:10.5px;
  letter-spacing:.08em;
  color:var(--ink-soft);
}
@media (hover:hover){
  .year-jump a:hover{border-color:var(--gold-ink);color:var(--gold-ink)}
}

/* ---------- year blocks ---------- */

.year-block{
  margin-top:clamp(3rem,7vh,4.6rem);
  scroll-margin-top:calc(var(--head-h) + 1rem);
}
.year-head{
  display:flex;
  align-items:baseline;
  gap:1rem;
  padding-bottom:.8rem;
  border-bottom:1px solid var(--ink);
}
.year-head h2{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(2rem,4.4vw,3rem);
  font-weight:400;
  line-height:1.1;
  letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
}
.year-meta{
  margin:0 0 .3rem auto;
  font-size:11.5px;
  letter-spacing:.08em;
  color:rgba(21,22,15,.62);
  font-variant-numeric:tabular-nums;
  text-align:right;
}
.year-meta span{margin:0 .5em;color:rgba(21,22,15,.3)}
.year-block .log-month{margin-top:clamp(1.6rem,3.6vh,2.4rem)}

/* 年ごとの「月ごとの回数」。冬に空く、夏に固まる、が形で見える。 */
.year-months{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:end;
  gap:.4rem 1.4rem;
  margin:.9rem 0 0;
}
.ym-label{
  margin:0 0 .35rem;
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:.14em;
  color:rgba(21,22,15,.5);
  white-space:nowrap;
}
.ym-bars{
  list-style:none;
  display:flex;
  align-items:flex-end;
  gap:clamp(.15rem,.6vw,.45rem);
  max-width:640px;
  margin:0;
  padding:0;
}
.ym-bars li{
  display:flex;
  flex:1 1 0;
  min-width:0;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  gap:.15rem;
}
.ym-bars li > b{
  font-family:var(--sans);
  font-size:10px;
  font-weight:400;
  letter-spacing:.02em;
  color:rgba(21,22,15,.55);
  font-variant-numeric:tabular-nums;
}
.ym-bars li > i{
  display:block;
  width:100%;
  height:calc(var(--h, 0) * 0.62px);
  background:rgba(134,101,60,.55);
}
.ym-bars li.is-zero > i{height:2px;background:var(--line)}
.ym-bars li.is-zero > b{color:rgba(21,22,15,.28)}
.ym-bars li > span{
  font-family:var(--sans);
  font-size:9px;
  letter-spacing:.02em;
  color:rgba(21,22,15,.5);
  font-variant-numeric:tabular-nums;
}

/* ---------- row: internal page + yamap ---------- */

.log-link{position:relative}
.log-hit{display:block}
.log-hit::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}
.log-date em{
  margin-left:.7em;
  font-style:normal;
  font-size:10.5px;
  letter-spacing:.1em;
  color:var(--ink-soft);
}
.log-out{
  position:relative;
  z-index:2;
  align-self:flex-start;
  margin-top:.35rem;
}
@media (hover:hover){
  .log-hit:hover .log-title{color:var(--gold-ink)}
}

/* =========================================================
   山行ページ（記録ひとつぶん）
   ========================================================= */

.act-hero{
  position:relative;
  min-height:min(72svh,640px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--night);
  color:var(--paper);
  isolation:isolate;
}
.act-hero-img{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 46%;
}
/* 縦の写真は横長の帯に入れると大半が切れる。切り抜かずに右へ置き、
   左の余白に題を組む（写真は全体が見える）。 */
.act-hero.is-portrait .act-hero-img{
  object-fit:contain;
  object-position:100% 50%;
}
.act-hero.is-portrait .hero-veil{
  background:
    linear-gradient(180deg,rgba(8,9,7,.5) 0%,rgba(8,9,7,.04) 22%,rgba(8,9,7,.5) 60%,rgba(8,9,7,.9) 100%),
    linear-gradient(90deg,rgba(8,9,7,.9) 0%,rgba(8,9,7,.66) 32%,rgba(8,9,7,0) 60%),
    radial-gradient(95% 85% at 4% 92%,rgba(8,9,7,.6),rgba(8,9,7,0) 66%);
}
.act-hero .hero-veil{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg,rgba(8,9,7,.66) 0%,rgba(8,9,7,.14) 24%,rgba(8,9,7,.52) 58%,rgba(8,9,7,.92) 100%),
    radial-gradient(95% 85% at 4% 92%,rgba(8,9,7,.62),rgba(8,9,7,0) 66%);
}
.act-hero-inner{
  padding-top:calc(var(--head-h) + 1.4rem);
  padding-bottom:clamp(2.4rem,6vh,4rem);
}
.act-crumb{
  display:flex;
  flex-wrap:wrap;
  gap:.55em;
  margin-bottom:1.4rem;
  font-size:11.5px;
  letter-spacing:.1em;
  color:rgba(241,237,228,.68);
}
.act-crumb a{border-bottom:1px solid rgba(241,237,228,.28);transition:border-color .4s var(--ease),color .4s var(--ease)}
.act-crumb span[aria-hidden]{color:rgba(241,237,228,.34)}
@media (hover:hover){.act-crumb a:hover{color:var(--paper);border-color:var(--gold-soft)}}
.act-title{
  margin:.9rem 0 0;
  font-family:var(--serif);
  font-size:clamp(1.75rem,4.2vw,3.1rem);
  font-weight:400;
  line-height:1.5;
  letter-spacing:.045em;
  text-shadow:0 1px 3px rgba(8,9,7,.55),0 6px 46px rgba(8,9,7,.6);
  max-width:22em;
}
.act-hero .hero-meta{
  margin-top:1.5rem;
  text-shadow:0 1px 14px rgba(8,9,7,.85);
}

/* ---------- stats ---------- */

.act-stats{
  background:var(--paper);
  padding:clamp(2rem,4.5vh,3rem) 0 clamp(1rem,2.5vh,1.6rem);
}
.act-stat-row{grid-template-columns:repeat(6,minmax(0,1fr));margin-top:0}
.act-stat-row dd{font-size:clamp(1.35rem,2.4vw,1.9rem)}

/* 数字の下の図。その日の時間の割合と、標準とのくらべ方。 */
.stat-viz{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.2rem,3vw,2.6rem);
  margin-top:clamp(1.4rem,3.2vh,2rem);
  padding-top:clamp(1rem,2.4vh,1.4rem);
  border-top:1px solid var(--line);
}
.sv-block{min-width:0}
.sv-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.15rem .8rem;
  margin:0 0 .7rem;
  font-family:var(--serif);
  font-size:13.5px;
  letter-spacing:.05em;
}
.sv-head span{
  font-family:var(--sans);
  font-size:10.5px;
  letter-spacing:.05em;
  color:var(--ink-soft);
}
.sv-day{
  display:flex;
  height:14px;
  background:var(--paper-2);
  overflow:hidden;
}
.sv-day i{display:block;height:100%}
.sv-walk{background:var(--ink)}
.sv-rest{background:rgba(134,101,60,.42)}
.sv-legend{
  display:flex;
  flex-wrap:wrap;
  gap:.3rem 1.6rem;
  margin:.6rem 0 0;
  font-family:var(--sans);
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--ink-soft);
}
.sv-key{display:inline-flex;align-items:baseline;gap:.4rem}
.sv-key > i{
  width:9px;height:9px;
  background:var(--ink);
  transform:translateY(.05em);
}
.sv-key--rest > i{background:rgba(134,101,60,.42)}
.sv-key b{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.05rem;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.sv-key em{
  font-style:normal;
  font-size:10.5px;
  color:var(--gold-ink);
  font-variant-numeric:tabular-nums;
}
/* 2本の棒は同じ列幅でないと、長さの比較が狂う。行は display:contents で
   同じグリッドに載せる（行ごとに grid を組むと ×2.5 のぶんだけ実際が短くなる）。 */
.sv-cmp{
  display:grid;
  grid-template-columns:2.6rem minmax(0,1fr) auto auto;
  column-gap:.7rem;
  row-gap:.4rem;
  align-items:center;
}
.sv-row{
  display:contents;
  margin:0;
  font-family:var(--sans);
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--ink-soft);
}
.sv-lbl{white-space:nowrap}
.sv-track{display:block;height:10px;background:var(--paper-2)}
.sv-track i{display:block;height:100%;background:rgba(21,22,15,.28)}
.sv-row b{
  font-family:var(--serif);
  font-weight:400;
  font-size:1rem;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.sv-row--actual .sv-track i{background:var(--gold-ink)}
.sv-row--actual b{color:var(--gold-ink)}
.sv-row em{
  font-style:normal;
  font-size:12px;
  color:var(--gold-ink);
  font-variant-numeric:tabular-nums;
}
.sv-note{margin:.5rem 0 0;font-size:11px}
.sv-note .asn-more{margin-left:0}
/* 速さの補足は一行だけ。詳しい説明は /log/ の Pace に預ける。 */
.act-stat-note{
  margin:1.2rem 0 0;
  font-size:12px;
  line-height:1.9;
  letter-spacing:.03em;
  color:var(--ink-soft);
}
.act-stat-note b{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.05em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.asn-more{
  margin-left:1.2rem;
  padding-bottom:.1rem;
  border-bottom:1px solid currentColor;
  color:var(--gold-ink);
  letter-spacing:.06em;
  white-space:nowrap;
}

/* ---------- record ---------- */

.act-record{background:var(--paper);padding:clamp(2rem,5vh,3.4rem) 0 clamp(2rem,5vh,3.4rem)}
.act-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1rem var(--pad);
  align-items:start;
}
.act-side{grid-column:1/4;position:sticky;top:calc(var(--head-h) + 1.8rem)}
.act-side .sec-mark{margin:0}
.act-side-date{
  margin:1.6rem 0 1.4rem;
  font-family:var(--serif);
  font-size:1.05rem;
  line-height:1.9;
  letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
}
.act-side-date span{font-size:12px;letter-spacing:.08em;color:var(--ink-soft)}
.act-side-link{
  display:inline-block;
  padding-bottom:.2rem;
  font-size:11.5px;
  letter-spacing:.14em;
  color:var(--gold-ink);
  border-bottom:1px solid rgba(134,101,60,.34);
  transition:border-color .4s var(--ease);
}
@media (hover:hover){.act-side-link:hover{border-color:var(--gold-ink)}}
.act-prose{grid-column:5/11}
/* 本文が何の文章なのかを、先に小さく言っておく */
.act-prose-label{
  display:flex;
  align-items:center;
  gap:.9rem;
  margin:0 0 1.15rem;
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.2em;
  color:var(--gold-ink);
}
.act-prose-label::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,rgba(134,101,60,.3),rgba(134,101,60,0));
}
.act-prose p{
  margin:0 0 1.5em;
  font-family:var(--serif);
  font-size:15.5px;
  line-height:2.25;
  letter-spacing:.045em;
  color:#23241c;
}
.act-prose p:last-of-type{margin-bottom:0}
.act-prose-foot{
  margin-top:2.4rem !important;
  font-family:var(--sans) !important;
  font-size:11.5px !important;
  letter-spacing:.12em !important;
  color:var(--ink-soft) !important;
}
.act-prose-foot a{border-bottom:1px solid rgba(134,101,60,.34);color:var(--gold-ink)}

/* ---------- sub head ---------- */

.act-subhead{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.3rem 1rem;
  padding-top:.6rem;
}
.act-subhead .sec-mark{flex:1 1 auto;min-width:0}
.act-subnote{
  margin:0 0 0 auto;
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--ink-soft);
}

/* ---------- dish（その日、山で作った料理） ---------- */

.act-dish{
  background:var(--paper-2);
  border-top:1px solid var(--line);
  padding:clamp(1.8rem,4.5vh,3rem) 0 clamp(2.2rem,5vh,3.4rem);
}
.act-dish-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:clamp(1.2rem,2.6vw,2rem);
  max-width:none;
  margin:clamp(1.4rem,3.2vh,2.2rem) 0 0;
}
.act-dish-grid:has(> :only-child){
  grid-template-columns:minmax(0,1fr);
  max-width:600px;
  margin-inline:auto;
}
.act-dish-fig{margin:0}
.act-dish-card{
  display:block;
  width:100%;
  margin:0;
  padding:0;
  border:1px solid var(--line);
  background:var(--paper);
  cursor:zoom-in;
}
/* 縦の写真も横の写真も、切らずにそのまま見せる */
.act-dish-card img{
  display:block;
  width:100%;
  height:auto;
  background:var(--paper-2);
}
.act-dish-card::after{display:none}
.act-dish-cap{
  display:flex;
  width:100%;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin-top:.7rem;
  font-size:11px;
  letter-spacing:.12em;
  color:var(--ink-soft);
}
.act-dish-cap span{
  color:var(--gold-ink);
  font-variant-numeric:tabular-nums;
  letter-spacing:.1em;
}

/* ---------- photos ---------- */

.act-photos{
  background:var(--paper);
  padding:clamp(1.4rem,3.5vh,2.4rem) 0 clamp(2.6rem,6vh,4rem);
}
.act-shots{margin-top:clamp(1.6rem,3.5vh,2.4rem)}
/* 3列だと1枚が小さすぎる。2列にして、写真そのものを大きく見せる */
.act-shots.masonry{columns:2;column-gap:clamp(1rem,1.8vw,1.6rem)}
/* いちばん見せたい4枚は、スマホでは1列にして大きく */
@media (max-width:760px){
  .act-shots.masonry.act-shots-feat{columns:1}
  .act-shots-feat .g-card{margin-bottom:clamp(1rem,3vw,1.4rem)}
  .act-shots-feat + .act-shots{margin-top:clamp(1.1rem,3vw,1.6rem)}
}

/* 何枚あるかを、まず文字で見せる */
.act-photo-count{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:0 .1rem;
  letter-spacing:.08em;
}
.act-photo-count b{
  font-family:var(--serif, serif);
  font-size:1.5rem;
  font-weight:400;
  line-height:1;
  margin:0 .18em 0 .28em;
  color:var(--gold-ink);
  font-variant-numeric:tabular-nums;
}
.act-photo-lede{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.4rem 1.4rem;
  margin:0;
  padding:.9rem 0 0;
  border-top:1px solid var(--line);
  font-size:12px;
  line-height:1.9;
  letter-spacing:.06em;
  color:var(--ink-soft);
}
.act-slide-btn{
  display:inline-flex;
  align-items:baseline;
  gap:.2rem;
  padding:.35rem 0;
  border:0;
  border-bottom:1px solid currentColor;
  background:none;
  color:var(--gold-ink);
  font-family:inherit;
  font-size:12px;
  letter-spacing:.14em;
  cursor:pointer;
  transition:opacity .3s var(--ease);
}
.act-slide-btn:hover{opacity:.65}

/* 通し番号。20枚あるなら 20 まで番号が振られる */
.g-no{
  position:absolute;
  z-index:2;
  top:.45rem;
  left:.5rem;
  display:flex;
  align-items:baseline;
  gap:.1rem;
  padding:.22rem .38rem;
  font-size:11px;
  line-height:1;
  letter-spacing:.1em;
  color:rgba(255,255,255,.96);
  font-variant-numeric:tabular-nums;
  /* 空の写真でも番号が飛ばないよう、薄い墨の下敷きを敷く */
  background:rgba(24,22,18,.46);
  border-radius:2px;
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  pointer-events:none;
}
.g-no i{
  font-style:normal;
  font-size:9.5px;
  opacity:.72;
}
.act-dish-card .g-no{top:.7rem;left:.75rem;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.55)}

/* ---------- pager ---------- */

.act-pager{
  background:var(--paper-2);
  padding:clamp(2rem,5vh,3.2rem) 0;
}
.act-pager-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:clamp(1rem,3vw,2.4rem);
  align-items:stretch;
}
.act-pager-item{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  padding:1.2rem 0 0;
  border-top:1px solid var(--ink);
  transition:color .4s var(--ease);
}
.act-pager-item--next{text-align:right;align-items:flex-end}
.act-pager-item.is-empty{border-top-color:var(--line)}
.act-pager-dir{
  font-size:11px;
  letter-spacing:.16em;
  color:var(--gold-ink);
}
.act-pager-date{
  font-size:11.5px;
  letter-spacing:.12em;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.act-pager-title{
  font-family:var(--serif);
  font-size:15px;
  line-height:1.75;
  letter-spacing:.04em;
}
.act-pager-all{
  align-self:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.1rem;
  padding:0 1rem;
  text-align:center;
}
.act-pager-all span{
  font-family:var(--serif);
  font-size:15px;
  letter-spacing:.16em;
  border-bottom:1px solid var(--gold-ink);
  padding-bottom:.1rem;
}
.act-pager-all em{
  font-style:normal;
  font-size:9.5px;
  letter-spacing:.18em;
  color:var(--ink-soft);
}
@media (hover:hover){
  .act-pager-item:hover{color:var(--gold-ink)}
}

/* ---------- nearby ---------- */

.act-rel{background:var(--paper);padding:clamp(2rem,5vh,3rem) 0 clamp(3rem,7vh,5rem)}
.act-rel-list{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2.2vw,2rem);
  margin:clamp(1.8rem,4vh,2.6rem) 0 0;
  padding:0;
}
.act-rel-item{display:block}
.act-rel-thumb{
  display:block;
  overflow:hidden;
  background:var(--paper-2);
  aspect-ratio:4/3;
}
.act-rel-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.thumb-blank{display:block;width:100%;height:100%;background:var(--paper-2)}
.act-rel-date{
  display:block;
  margin:.75rem 0 .15rem;
  font-size:11px;
  letter-spacing:.12em;
  color:var(--gold-ink);
  font-variant-numeric:tabular-nums;
}
.act-rel-title{
  display:block;
  font-family:var(--serif);
  font-size:14px;
  line-height:1.7;
  letter-spacing:.03em;
}
@media (hover:hover){
  .act-rel-item:hover .act-rel-thumb img{transform:scale(1.04)}
  .act-rel-item:hover .act-rel-title{color:var(--gold-ink)}
}

/* ---------- same mountain（同じ山に登った記録） ---------- */

.act-same{
  background:var(--paper);
  border-top:1px solid var(--line);
  padding:clamp(2rem,5vh,3.2rem) 0 clamp(2.4rem,6vh,4rem);
}
.act-same-lead{
  margin:clamp(1.2rem,3vh,1.8rem) 0 0;
  padding-bottom:clamp(1rem,2.4vh,1.4rem);
  border-bottom:1px solid var(--line);
}
.sl-line{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.4rem clamp(1.1rem,3vw,2.2rem);
  margin:0;
}
.sl-what{
  font-family:var(--serif);
  font-size:clamp(15px,1.5vw,17px);
  letter-spacing:.04em;
}
.sl-what b{
  margin:0 .08em;
  font-family:var(--sans);
  font-size:1.3em;
  font-weight:400;
  color:var(--gold-ink);
  font-variant-numeric:tabular-nums;
}
.sl-cmp{
  display:inline-flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.35rem clamp(.8rem,2.5vw,1.8rem);
}
.sl-pair{
  display:inline-flex;
  align-items:baseline;
  gap:.45rem;
  font-family:var(--sans);
  font-variant-numeric:tabular-nums;
}
.sl-lbl{font-size:10px;letter-spacing:.14em;color:var(--ink-soft)}
.sl-pair b{
  font-family:var(--serif);
  font-size:clamp(22px,2.6vw,30px);
  font-weight:400;
  line-height:1;
}
.sl-pair b:last-of-type{color:var(--gold-ink)}
.sl-pair i{font-style:normal;font-size:12px;color:var(--ink-soft);margin:0 .1rem}
.sl-pair small{margin-left:.15em;font-size:9.5px;letter-spacing:.1em;color:var(--ink-soft)}
.sl-diff{
  font-family:var(--sans);
  font-size:clamp(15px,1.6vw,18px);
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  color:var(--ink-soft);
}
.sl-diff small{margin-left:.2em;font-size:9.5px;letter-spacing:.1em}
.sl-diff.is-up{color:var(--gold-ink)}
.sl-diff.is-down{color:#8a7b68}
.sl-route{
  padding:.14rem .45rem;
  border:1px solid var(--line);
  font-family:var(--sans);
  font-size:9.5px;
  letter-spacing:.1em;
  color:var(--ink-soft);
}
.sl-note{font-family:var(--sans);font-size:11.5px;letter-spacing:.08em;color:var(--ink-soft)}
.act-same-def{
  margin:.7rem 0 0;
  font-family:var(--sans);
  font-size:10.5px;
  letter-spacing:.06em;
  color:var(--ink-soft);
}
/* 推移の図。表の前に、形で先に言う。 */
.same-chart{
  margin:clamp(1.4rem,3.4vh,2rem) 0 0;
  padding:clamp(1rem,2.4vw,1.5rem) clamp(.8rem,2.2vw,1.4rem) clamp(.7rem,1.6vw,1rem);
  background:var(--paper-2);
  border:1px solid var(--line);
}
.sc-head{display:block;margin:0 0 clamp(.8rem,2vh,1.2rem)}
.sc-title{
  display:block;
  font-family:var(--serif);
  font-size:clamp(14px,1.5vw,16px);
  letter-spacing:.06em;
}
.sc-sub{
  display:block;
  margin-top:.3rem;
  font-family:var(--sans);
  font-size:10.5px;
  letter-spacing:.06em;
  color:var(--ink-soft);
}
.sc-bars{
  display:flex;
  align-items:flex-end;
  gap:clamp(.25rem,.9vw,.7rem);
  margin:0;
  padding:0;
  list-style:none;
}
.sc-bar{
  display:flex;
  flex:1 1 0;
  min-width:0;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:.3rem;
}
.sc-track{
  display:flex;
  align-items:flex-end;
  width:100%;
  height:clamp(88px,13vh,132px);
}
.sc-track i{
  display:block;
  width:100%;
  background:rgba(134,101,60,.28);
  border-top:1px solid rgba(134,101,60,.5);
  transition:height .8s var(--ease);
}
.sc-bar.is-current .sc-track i{
  background:rgba(134,101,60,.78);
  border-top-color:var(--gold-ink);
}
.sc-val{
  font-family:var(--sans);
  font-size:11.5px;
  letter-spacing:.02em;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.sc-bar.is-current .sc-val{color:var(--gold-ink);font-weight:500}
.sc-when{
  font-family:var(--sans);
  font-size:9.5px;
  letter-spacing:.04em;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.act-same-head,
.act-same-row > a,
.act-same-row.is-current{
  display:grid;
  grid-template-columns:5.8rem minmax(0,1fr) 6.4rem 5.4rem;
  gap:.3rem 1.2rem;
  align-items:baseline;
}
.act-same-head{
  margin-top:clamp(1.2rem,3vh,1.8rem);
  padding:0 clamp(.55rem,1.4vw,1rem) .55rem;
  border-bottom:1px solid var(--ink);
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:.16em;
  color:var(--ink-soft);
}
.act-same-head span:nth-child(3),
.act-same-head span:nth-child(4){text-align:right}
.act-same-list{list-style:none;margin:0;padding:0}
.act-same-row{border-bottom:1px solid var(--line)}
.act-same-row > a,
.act-same-row.is-current{padding:.95rem clamp(.55rem,1.4vw,1rem);transition:color .4s var(--ease)}
.act-same-date{
  font-size:11px;
  letter-spacing:.1em;
  color:var(--gold-ink);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.act-same-main{display:block;min-width:0}
.act-same-title{
  display:block;
  font-family:var(--serif);
  font-size:15px;
  line-height:1.7;
  letter-spacing:.03em;
}
.act-same-now{
  display:inline-block;
  margin-left:.5rem;
  padding:.1rem .4rem;
  border:1px solid rgba(134,101,60,.34);
  font-family:var(--sans);
  font-size:9px;
  letter-spacing:.12em;
  color:var(--gold-ink);
  vertical-align:.12em;
  white-space:nowrap;
}
.act-same-meta{
  display:block;
  margin-top:.15rem;
  font-family:var(--sans);
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.act-same-pace{
  text-align:right;
  font-family:var(--sans);
  font-size:1.25rem;
  letter-spacing:.03em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.act-same-pace small{
  margin-left:.15em;
  font-size:9.5px;
  letter-spacing:.06em;
  color:var(--ink-soft);
}
.act-same-delta{
  text-align:right;
  font-family:var(--sans);
  color:var(--ink-soft);
  white-space:nowrap;
}
.act-same-delta b{
  display:block;
  font-size:13.5px;
  font-weight:500;
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.act-same-delta.is-up b{color:var(--gold-ink)}
.act-same-delta.is-down b{color:#8a7b68}
.act-same-row.is-current{
  background:linear-gradient(90deg,rgba(189,154,104,.1),rgba(189,154,104,0) 70%);
  box-shadow:inset 2px 0 0 var(--gold-ink);
}
@media (hover:hover){
  .act-same-row > a:hover .act-same-title{color:var(--gold-ink)}
}

/* ---------- responsive ---------- */

@media (max-width:980px){
  .year-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 1.2rem}
  .act-stat-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .act-stat-row > div:nth-child(2n){border-right:1px solid var(--line)}
  .act-stat-row > div:nth-child(3n){border-right:0}
  .act-stat-row > div:nth-child(n+4){border-top:1px solid var(--line);margin-top:1.3rem}
  .act-side{position:static;grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.2rem}
  .act-side-date{margin:.2rem 0 0;font-size:.95rem}
  .act-side-link{margin-left:auto}
  .act-prose{grid-column:1/-1;margin-top:1.4rem}
  .act-pager-inner{grid-template-columns:1fr 1fr;grid-template-areas:"prev next" "all all"}
  .act-pager-item--prev{grid-area:prev}
  .act-pager-item--next{grid-area:next}
  .act-pager-all{grid-area:all;margin-top:1.4rem}
}

@media (max-width:760px){
  .act-hero{min-height:min(76svh,560px)}
  /* 縦写真のヒーローは、左を暗くする帯をやめる（写真の上に出てしまう） */
  .act-hero.is-portrait .hero-veil{
    background:
      linear-gradient(180deg,rgba(8,9,7,.5) 0%,rgba(8,9,7,.04) 22%,rgba(8,9,7,.5) 60%,rgba(8,9,7,.9) 100%),
      radial-gradient(95% 85% at 4% 92%,rgba(8,9,7,.6),rgba(8,9,7,0) 66%);
  }
  .act-title{font-size:clamp(1.5rem,6.2vw,2.1rem);line-height:1.6}
  .act-hero .hero-meta{font-size:11.5px}
  .act-stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .act-stat-row > div:nth-child(2n){border-right:0}
  .act-stat-row > div:nth-child(3n){border-right:1px solid var(--line)}
  .act-stat-row > div:nth-child(n+3){border-top:1px solid var(--line);margin-top:1.2rem}
  .year-head{flex-wrap:wrap;gap:.2rem 1rem}
  .year-meta{margin-left:0;text-align:left;width:100%}
  .act-rel-list{grid-template-columns:1fr 1fr;gap:1.2rem .8rem}
  .act-rel-list li:last-child{display:none}
  .act-pager-title{font-size:13.5px}
  .act-dish-grid,
  .act-dish-grid:has(> :only-child){grid-template-columns:1fr;max-width:none}
  .act-same-head{display:none}
  .stat-viz{grid-template-columns:1fr;gap:1.2rem}
  .sv-cmp{grid-template-columns:2.4rem minmax(0,1fr) auto auto;column-gap:.5rem}
  .sc-bars{gap:.2rem}
  .sc-val{font-size:10px}
  .sc-when{font-size:8.5px;letter-spacing:0}
  .sc-track{height:clamp(72px,11vh,100px)}
  .act-same-row > a,
  .act-same-row.is-current{
    grid-template-columns:1fr auto;
    grid-template-areas:"date pace" "main main" "delta delta";
    gap:.35rem .8rem;
    padding:.9rem clamp(.55rem,1.4vw,1rem);
  }
  .act-same-date{grid-area:date}
  .act-same-main{grid-area:main}
  .act-same-pace{grid-area:pace}
  .act-same-delta{
    grid-area:delta;
    display:flex;
    gap:.4rem;
    align-items:baseline;
    justify-content:flex-end;
  }
  /* 見出しの行が無いので、何の数字かはここで言う */
  .act-same-delta:not(:empty)::before{
    content:"前回比";
    font-size:9.5px;
    letter-spacing:.1em;
    color:var(--ink-soft);
  }
  .act-same-delta b{display:inline}
}

@media (max-width:520px){
  .year-strip{grid-template-columns:1fr;gap:1.2rem}
  .year-jump a{flex:1;justify-content:center}
}

/* 写真のない記録（2023年の初期の山行） */
.act-hero.is-bare{
  min-height:min(46svh,430px);
  background:
    radial-gradient(120% 90% at 78% 8%,rgba(189,154,104,.16),rgba(11,12,10,0) 58%),
    linear-gradient(165deg,#141611 0%,#0b0c0a 52%,#080907 100%);
}

/* 秀麗富嶽十二景の特集へ戻る道（該当する山の節に直接飛ぶ） */
.act-side-peak{display:block;width:fit-content;margin-top:1rem}
@media (max-width:980px){
  .act-side-peak{display:inline-block;margin:0 0 0 .8rem}
}

/* 写真は「隠さず並べる」。スマホでも2列にして、スクロールなしで
   何枚あるか見当がつくようにする（1列だと1枚ずつしか目に入らない）。 */
@media (max-width:520px){
  .act-shots.masonry{columns:2;column-gap:.6rem}
  .act-shots .g-card{margin-bottom:.6rem}
  .g-no{top:.32rem;left:.34rem;padding:.18rem .3rem;font-size:10px}
  .g-no i{font-size:9px}
  .act-photo-lede{font-size:11.5px}
}

/* ---------- この記録の読み方 ---------- */
.log-legend{
  margin-top:clamp(1.6rem,3.4vh,2.4rem);
  padding-top:1.2rem;
  border-top:1px solid var(--line);
}
.ll-head{
  margin:0 0 .9rem;
  font-size:11px;
  letter-spacing:.22em;
  color:var(--gold-ink);
}
.ll-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem clamp(1.2rem,2.4vw,2rem);
  margin:0;
}
.ll-list div{
  padding-top:.7rem;
  border-top:1px solid rgba(21,22,15,.1);
}
.ll-list dt{
  font-size:12.5px;
  letter-spacing:.08em;
  color:var(--ink);
}
.ll-list dd{
  margin:.4rem 0 0;
  font-size:12px;
  line-height:1.95;
  letter-spacing:.02em;
  color:var(--ink-soft);
}
.ll-list dd b{
  font-family:var(--serif);
  font-weight:400;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.ll-links{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.6rem;
  margin:1.2rem 0 0;
  font-size:12px;
  letter-spacing:.08em;
}
.ll-links a{
  color:var(--gold-ink);
  text-decoration:none;
  border-bottom:1px solid rgba(134,101,60,.4);
  padding-bottom:.1rem;
}
@media (max-width:760px){
  .ll-list{grid-template-columns:1fr;gap:.2rem}
  .ll-list div{padding:.85rem 0}
}

/* =========================================================
   行のてざわり — タップすると記事が開くことを、静かに示す
   =========================================================
   落ち着いた紙面のまま、押せる場所を分かるようにする。
   行に触れると、左端に金の縦線、うっすらと紙が沈み、
   右端の「読む」が反転する。派手にしない。
   --------------------------------------------------------- */

.log-link{
  padding:1.15rem 1rem;
  margin:0 -1rem;
  transition:background .5s var(--ease);
}
.log-link::before{
  content:"";
  position:absolute;
  left:0;
  top:.85rem;
  bottom:.85rem;
  width:2px;
  background:var(--gold);
  opacity:0;
  transform:scaleY(.35);
  transform-origin:top;
  transition:opacity .45s var(--ease),transform .6s var(--ease);
  z-index:3;
}

.log-side{
  position:relative;
  z-index:2;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:.75rem;
}
.log-side .log-out{align-self:flex-end;margin-top:0}
.log-go{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.46rem .82rem .42rem;
  border:1px solid rgba(134,101,60,.34);
  border-radius:999px;
  font-size:11px;
  line-height:1;
  letter-spacing:.16em;
  color:var(--gold-ink);
  white-space:nowrap;
  pointer-events:none;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.log-go i{
  font-style:normal;
  font-size:12px;
  letter-spacing:0;
  transition:transform .5s var(--ease);
}

@media (hover:hover){
  .log-link:hover{background:rgba(21,22,15,.028)}
  .log-link:hover::before{opacity:.9;transform:scaleY(1)}
  .log-link:hover .log-go{background:var(--gold-ink);border-color:var(--gold-ink);color:var(--paper)}
  .log-link:hover .log-go i{transform:translateX(3px)}
}

@media (max-width:760px){
  .log-link{padding:.95rem .8rem;margin:0 -.8rem}
  .log-link::before{top:.6rem;bottom:.6rem}
  /* 2列になるので「読む」は行の下、右端に置く */
  .log-side{
    grid-column:1/-1;
    grid-row:2;
    flex-direction:row;
    justify-content:flex-end;
    align-items:center;
    align-self:end;
    margin-top:.15rem;
  }
  .log-go{padding:.4rem .7rem .36rem;font-size:10.5px}
}

/* ---------- 記録の分類ラベル ----------
   その日のページの見出しの下に、エリア・山域・テーマ・名山・料理を並べる。
   「どの棚にある記録か」が、ページを開いた瞬間に分かるように。 */
.act-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-top:1.15rem;
}
.act-tag{
  display:inline-flex;
  align-items:baseline;
  gap:.5rem;
  padding:.36rem .85rem .32rem;
  border:1px solid rgba(241,237,228,.3);
  border-radius:999px;
  font-family:var(--sans);
  font-size:11.5px;
  letter-spacing:.06em;
  color:rgba(241,237,228,.92);
  text-shadow:0 1px 10px rgba(8,9,7,.6);
  transition:border-color .4s var(--ease),background-color .4s var(--ease),color .4s var(--ease);
}
.act-tag span{
  font-size:9px;
  letter-spacing:.18em;
  color:rgba(241,237,228,.52);
}
@media (hover:hover){
  .act-tag:hover{
    border-color:var(--gold);
    background:rgba(134,101,60,.28);
    color:var(--paper);
  }
  .act-tag:hover span{color:rgba(241,237,228,.8)}
}
@media (max-width:760px){
  .act-tags{gap:.35rem;margin-top:.95rem}
  .act-tag{font-size:10.5px;padding:.32rem .7rem .28rem}
}

/* 一覧の行に添える山域名 */
.log-date .log-area{
  font-style:normal;
  margin-left:.7rem;
  font-size:10.5px;
  letter-spacing:.1em;
  color:rgba(21,22,15,.45);
}

/* ---------- 記録の検索 ---------- */
.log-search{
  margin:1.4rem 0 2.2rem;
  padding:1.15rem 1.25rem 1.1rem;
  border:1px solid var(--line);
  background:var(--paper-2);
}
.ls-label{
  display:block;
  margin-bottom:.6rem;
  font-size:10px;
  letter-spacing:.26em;
  color:var(--gold-ink);
}
.ls-field{position:relative;display:flex;align-items:center}
.ls-input{
  width:100%;
  padding:.75rem 4.2rem .7rem .95rem;
  border:1px solid rgba(21,22,15,.22);
  background:var(--paper);
  font-family:var(--sans);
  font-size:15px;
  letter-spacing:.05em;
  color:var(--ink);
  -webkit-appearance:none;
  appearance:none;
  border-radius:0;
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.ls-input::placeholder{color:rgba(21,22,15,.38)}
.ls-input:focus{outline:none;border-color:var(--gold-ink);background:#fff}
.ls-clear{
  position:absolute;
  right:.55rem;
  padding:.35rem .6rem;
  border:0;
  background:none;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--ink-soft);
  cursor:pointer;
}
.ls-clear:hover{color:var(--gold-ink)}
.ls-hint{
  margin:.55rem 0 0;
  font-size:11px;
  letter-spacing:.06em;
  color:rgba(21,22,15,.45);
}
.ls-result{
  margin:.7rem 0 0;
  font-family:var(--serif);
  font-size:14px;
  letter-spacing:.04em;
  color:var(--gold-ink);
}

/* ---------- 検索中 ----------
   絞り込んだことが一目で分かるように、あいだの節を畳んで
   結果を検索欄のすぐ下に出す。見た目ごと変える。 */
body.is-searching .log-summary,
body.is-searching .log-years,
body.is-searching .log-pace{display:none}
body.is-searching .li-groups,
body.is-searching .log-list .section-head,
body.is-searching .year-jump,
body.is-searching .log-search-note{display:none}
body.is-searching .log-hero{min-height:min(38svh,340px)}
body.is-searching .log-hero .hero-title{font-size:clamp(2rem,4.4vw,2.8rem)}
body.is-searching .log-list{padding-top:clamp(1.2rem,3vh,2rem)}

.log-filter{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.5rem 1.4rem;
  margin:0 0 clamp(1.4rem,3vh,2.2rem);
  padding:1.1rem 1.3rem;
  background:var(--paper-2);
  border-left:3px solid var(--gold-ink);
}
.log-filter[hidden]{display:none}
.lf-head{display:flex;align-items:baseline;gap:.7rem;margin:0;min-width:0}
.lf-label{
  font-size:10.5px;
  letter-spacing:.22em;
  color:var(--gold-ink);
  white-space:nowrap;
}
.lf-q{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.15rem,2.2vw,1.5rem);
  letter-spacing:.04em;
  line-height:1.4;
}
.lf-n{
  display:flex;
  align-items:baseline;
  gap:.3rem;
  margin:0;
  font-size:12px;
  color:var(--ink-soft);
}
.lf-n b{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.15rem,2.2vw,1.5rem);
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.lf-n em{font-style:normal;font-size:11px;letter-spacing:.04em}
.lf-clear{
  margin-left:auto;
  padding:.42rem .9rem .38rem;
  border:1px solid rgba(21,22,15,.25);
  background:none;
  font-size:12px;
  letter-spacing:.05em;
  cursor:pointer;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.lf-clear:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.lf-empty{
  flex-basis:100%;
  margin:.3rem 0 0;
  font-size:12.5px;
  line-height:1.9;
  color:var(--ink-soft);
}
.lf-empty[hidden]{display:none}
.lf-empty a{border-bottom:1px solid rgba(134,101,60,.45);color:var(--gold-ink)}


/* =========================================================
   山行ログ — 冒頭の入り口
   ヒーローのすぐ下に「何が見られるか」を出すための帯。
   数字（回数）はここでだけ出して、下の一覧は日付順のまま。
   ========================================================= */
.log-index{
  padding:clamp(2rem,4.5vh,3.2rem) 0 clamp(1.4rem,3vh,2rem);
  border-top:1px solid var(--line);
  background:var(--paper);
}
.li-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,24rem);
  align-items:end;
  gap:.5rem clamp(1rem,3vw,2.4rem);
}
.li-head .sec-mark{grid-column:1/-1;margin-bottom:.55rem}
.li-head h2{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.35rem,2.4vw,1.9rem);
  letter-spacing:.05em;
}
.li-head p:last-child{
  margin:0;
  font-size:12.5px;
  line-height:1.9;
  color:var(--ink-soft);
  text-align:right;
}
.li-search{margin:1.5rem 0 0;max-width:34rem}
.li-groups{margin-top:1.5rem;border-top:1px solid var(--line)}
.li-row{
  display:grid;
  grid-template-columns:6.2rem minmax(0,1fr);
  gap:.5rem 1rem;
  align-items:start;
  padding:.9rem 0;
  border-bottom:1px solid var(--line);
}
.li-label{
  margin:0;
  padding-top:.42rem;
  font-size:10px;
  letter-spacing:.24em;
  color:var(--gold-ink);
}
.li-chips{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
}
.li-chips a{
  display:inline-flex;
  align-items:baseline;
  gap:.5rem;
  padding:.4rem .75rem .36rem;
  border:1px solid rgba(21,22,15,.18);
  font-size:12.5px;
  line-height:1.5;
  letter-spacing:.04em;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.li-chips em{
  font-style:normal;
  font-size:10.5px;
  color:var(--gold-ink);
  font-variant-numeric:tabular-nums;
  transition:color .3s var(--ease);
}
@media (hover:hover){
  .li-chips a:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
  .li-chips a:hover em{color:var(--gold-soft)}
}
.ls-jump{
  display:inline-block;
  margin-top:.85rem;
  padding-bottom:.15rem;
  border-bottom:1px solid currentColor;
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--gold-ink);
}
.ls-jump span{margin-left:.35rem}
/* display を指定した要素は [hidden] が効かなくなるので、明示的に消す。 */
.ls-jump[hidden]{display:none}
.log-search-note{
  margin:1.2rem 0 0;
  font-size:11.5px;
  letter-spacing:.08em;
}
.log-search-note a{
  color:var(--ink-soft);
  border-bottom:1px solid rgba(21,22,15,.2);
  padding-bottom:.1rem;
}
.log-search-note a:hover{color:var(--gold-ink)}
.log-search-note span{margin-left:.3rem}
@media (max-width:700px){
  .li-head{grid-template-columns:1fr}
  .li-head p:last-child{text-align:left}
  .li-row{grid-template-columns:1fr;gap:.45rem}
  .li-label{padding-top:0}
}

.log-selects{display:flex;flex-wrap:wrap;gap:16px;align-items:end;margin:20px 0}
.log-selects label{display:grid;gap:7px;font-size:13px;color:var(--ink-soft)}
.log-selects select{font:inherit;padding:11px 35px 11px 12px;background:var(--paper);border:1px solid var(--line);border-radius:3px;color:var(--ink);min-width:155px}
.log-selects button{font:inherit;font-size:13px;padding:12px 0;text-decoration:underline;color:var(--ink-soft)}
.log-selects select:focus-visible,.log-selects button:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}