/* =========================================================
   山の記録 — index / portal
   ========================================================= */

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

.hero--index .hero-media img{object-position:50% 42%}
.hero--index .hero-title{font-size:clamp(3.6rem,11vw,9rem)}
.hero--index .hero-sub{margin-bottom:2.6rem}

/* ---------- intro ---------- */

.intro--index{background:var(--paper-2);padding-bottom:clamp(3rem,7vh,5rem)}

/* ---------- records ---------- */

.records{
  background:var(--paper);
  padding:clamp(2.4rem,5vh,3.6rem) 0 clamp(3.5rem,8vh,6rem);
}
.records-head{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:.6rem var(--pad);
  align-items:end;
  padding-top:clamp(1.6rem,3.5vh,2.4rem);
}
.records-head .sec-mark{grid-column:1/-1}
.records-head h2{
  grid-column:1/7;
  margin-top:.55rem;
  font-size:clamp(2.2rem,4.6vw,3.6rem);
  line-height:1.4;
}
.records-head p:last-child{
  grid-column:9/13;
  margin:0 0 .4rem;
  text-align:right;
  font-size:14px;
  line-height:2;
  color:var(--ink-soft);
}

/* ---------- filter bar ---------- */

.records-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem 2rem;
  margin-top:clamp(1.4rem,3vh,2rem);
  padding-top:1.1rem;
  border-top:1px solid var(--line);
}
.records-bar[hidden]{display:none}

.chips{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.45rem;
  min-width:0;
}
.chips-sep{
  flex:none;
  width:1px;
  height:18px;
  margin:.2rem .55rem 0;
  background:var(--line);
}
.chip{
  flex:none;
  padding:.5rem .95rem;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:13px;
  letter-spacing:.1em;
  color:var(--ink-soft);
  white-space:nowrap;
  transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.chip:hover{border-color:rgba(134,101,60,.5);color:var(--ink)}
.chip.is-active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip:disabled{opacity:.38;cursor:default}
.chip:disabled:hover{border-color:var(--line);color:var(--ink-soft)}
.chip-n{
  margin-left:.3rem;
  font-size:10px;
  letter-spacing:.06em;
  opacity:.55;
  font-variant-numeric:tabular-nums;
}

.records-search{position:relative;flex:none}
.records-search input{
  width:min(230px,58vw);
  padding:.5rem 0 .45rem;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:none;
  font-family:inherit;
  font-size:13px;
  letter-spacing:.08em;
  color:var(--ink);
  -webkit-appearance:none;
  transition:border-color .4s var(--ease);
}
.records-search input::placeholder{color:rgba(21,22,15,.32);letter-spacing:.08em}
.records-search input:focus{outline:none;border-bottom-color:var(--gold-ink)}

/* 山日記の検索は、ポータルの「山を検索」に一本化した。
   ここは全180回の検索へ渡すだけの一行。 */
.records-search-note{flex:none;margin:0}
.records-search-note a{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding-bottom:.28rem;
  border-bottom:1px solid rgba(134,101,60,.4);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--gold-ink);
  transition:gap .4s var(--ease),border-color .4s var(--ease);
}
@media (hover:hover){
  .records-search-note a:hover{gap:.8rem;border-bottom-color:var(--gold-ink)}
}

.records-count{
  margin:.9rem 0 0;
  font-size:12.5px;
  letter-spacing:.16em;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.records-count[hidden]{display:none}

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

.record-list{
  list-style:none;
  margin:clamp(1.6rem,3vh,2.2rem) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(2.4rem,4vw,3.4rem) clamp(1.4rem,2.4vw,2.2rem);
}
.rec{position:relative}
.rec[hidden]{display:none}
/* two records only: let them fill the row instead of leaving a hole */
.record-list:has(.rec:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.rec-link{
  display:flex;
  flex-direction:column;
  height:100%;
  color:inherit;
}
.rec-media{
  position:relative;
  margin:0;
  overflow:hidden;
  background:var(--paper-2);
}
.rec-media img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  transition:transform 1.3s var(--ease);
}
.rec-tag{
  position:absolute;
  left:.85rem;
  top:.85rem;
  padding:.3rem .6rem;
  font-size:10px;
  letter-spacing:.18em;
  color:rgba(241,237,228,.95);
  background:rgba(8,9,7,.72);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.rec-body{padding-top:1.05rem}
.rec-date{
  display:flex;
  flex-wrap:wrap;
  gap:.2rem .75rem;
  margin:0;
  font-size:12.5px;
  letter-spacing:.12em;
  color:var(--gold-ink);
  font-variant-numeric:tabular-nums;
}
.rec-area{color:var(--ink-soft);letter-spacing:.1em}
.rec-title{
  margin:.5rem 0 .25rem;
  font-family:var(--serif);
  font-size:clamp(1.3rem,1.8vw,1.6rem);
  line-height:1.55;
  letter-spacing:.05em;
}
.rec-sub{
  margin:0;
  font-size:14.5px;
  line-height:1.9;
  color:var(--ink-soft);
}
.rec-stats{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 1.4rem;
  margin:auto 0 0;
  padding-top:.95rem;
  border-top:1px solid var(--line);
}
.rec-body{display:flex;flex-direction:column;flex:1}
.rec-body .rec-date{margin-bottom:.5rem}
.rec-body .rec-title{margin-top:0}
.rec-body .rec-sub{margin-bottom:.85rem}
.rec-stats div{display:flex;align-items:baseline;gap:.4rem}
.rec-stats dt{
  font-size:12px;
  letter-spacing:.06em;
  color:rgba(21,22,15,.64);
}
.rec-stats dd{
  margin:0;
  font-family:var(--serif);
  font-size:15px;
  letter-spacing:.03em;
  font-variant-numeric:tabular-nums;
}
/* 押せることが分かる最小限の合図。角を丸めた枠は、ここだけ。
   カード全体がリンクだが、文字だけの「読む」は押せると読まれないので枠を持つ。 */
.rec-more{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  width:fit-content;
  margin:auto 0 0;
  padding:.5rem .95rem .45rem;
  border:1px solid rgba(134,101,60,.34);
  border-radius:999px;
  font-size:12.5px;
  letter-spacing:.14em;
  color:var(--ink);
  transition:color .4s var(--ease),background-color .4s var(--ease),
             border-color .4s var(--ease),gap .4s var(--ease);
}
.rec-more .arrow{font-family:var(--sans);transition:transform .5s var(--ease)}
.rec-media::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid transparent;
  transition:border-color .5s var(--ease);
  pointer-events:none;
}
.rec-link:focus-visible{outline:none}
.rec-link:focus-visible .rec-more{outline:2px solid var(--gold-ink);outline-offset:3px}

@media (hover:hover){
  .rec:hover .rec-media img{transform:scale(1.045)}
  .rec:hover .rec-media::after{border-color:rgba(134,101,60,.4)}
  .rec:hover .rec-more{
    gap:.85rem;
    color:var(--paper);
    background:var(--gold-ink);
    border-color:var(--gold-ink);
  }
  .rec:hover .rec-more .arrow{transform:translateX(3px)}
}

.records-empty{
  margin:3rem 0 0;
  font-size:14px;
  line-height:2;
  color:var(--ink-soft);
}
.records-empty[hidden]{display:none}

.records-more-wrap{
  display:flex;
  justify-content:center;
  margin-top:clamp(3rem,7vh,4.5rem);
}
.records-more-wrap[hidden]{display:none}
.records-more{
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  padding:.95rem 2.2rem;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:12px;
  letter-spacing:.18em;
  color:var(--ink);
  transition:border-color .4s var(--ease),background .4s var(--ease),color .4s var(--ease);
}
.records-more:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.records-more span{
  font-size:11px;
  letter-spacing:.06em;
  opacity:.55;
  font-variant-numeric:tabular-nums;
}

/* ---------- year log ---------- */

.year-log{
  background:var(--paper-2);
  padding:clamp(2rem,5vh,3.5rem) 0 clamp(3.5rem,8vh,6rem);
}
.year-log-inner{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1rem var(--pad);
  align-items:start;
  padding-top:.6rem;
}
.year-log-inner .sec-mark{grid-column:1/-1}
.year-log-copy{
  grid-column:1/7;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.year-log h2{
  margin:.85rem 0 0;
  font-size:clamp(2rem,4.2vw,3.2rem);
  line-height:1.45;
}
.year-log-lead{
  margin:1rem 0 0;
  font-size:15px;
  line-height:2.05;
  color:var(--ink-soft);
}
.year-log-link{
  display:inline-flex;
  align-items:center;
  gap:.9rem;
  width:fit-content;
  margin-top:clamp(1.4rem,3vh,2rem);
  padding-bottom:.45rem;
  font-size:13px;
  letter-spacing:.16em;
  color:var(--gold-ink);
  border-bottom:1px solid rgba(134,101,60,.4);
  transition:gap .4s var(--ease),border-color .4s var(--ease);
}
.year-log-link:hover{gap:1.4rem;border-color:var(--gold-ink)}
.year-log-stats{
  margin:clamp(1.8rem,4vh,2.8rem) 0 0;
  padding:0;
}
.year-log-side{
  grid-column:8/13;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:1.6rem;
}
.year-log-stats div{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1.2rem;
  padding:.9rem 0 .85rem;
  border-top:1px solid var(--line);
}
.year-log-stats div:last-child{border-bottom:1px solid var(--line)}
.year-log-stats dt{
  font-size:12.5px;
  letter-spacing:.12em;
  color:rgba(21,22,15,.62);
}
.year-log-stats dd{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.4rem,2.5vw,1.8rem);
  letter-spacing:.03em;
  font-variant-numeric:tabular-nums;
}
.year-log-stats em{
  font-style:normal;
  font-family:var(--sans);
  font-size:10.5px;
  letter-spacing:.14em;
  margin-left:.45em;
  color:var(--ink-soft);
}

/* ---------- film band ---------- */

.film-band{
  position:relative;
  min-height:min(74svh,660px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--night);
  color:var(--paper);
  isolation:isolate;
}
/* 負の z-index は iOS Safari で動画が描画されないことがあるので、
   ベールとコピーを正の z-index で上に重ねる */
.film-band video{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 45%;
}
.film-band-veil{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(8,9,7,.55) 0%,rgba(8,9,7,.02) 38%,rgba(8,9,7,.86) 100%),
    radial-gradient(115% 85% at 0% 100%,rgba(8,9,7,.62),rgba(8,9,7,0) 60%);
}
.film-band-copy{
  position:relative;
  z-index:2;
  padding-bottom:clamp(3.5rem,8vh,6rem);
  text-shadow:0 1px 22px rgba(8,9,7,.6),0 0 2px rgba(8,9,7,.35);
}
.film-band .film-toggle{z-index:3;bottom:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem)}
.film-band-copy > *{max-width:620px}
.film-band-copy h2{
  margin:1rem 0 1.3rem;
  font-size:clamp(2.4rem,5.4vw,4rem);
  line-height:1.4;
}
.film-band-copy p:last-child{
  margin:0;
  font-size:15px;
  line-height:2.2;
  color:rgba(241,237,228,.82);
}

/* ---------- next note ---------- */

.next-note{
  background:var(--paper);
  padding:clamp(5rem,11vh,8rem) 0 clamp(5rem,11vh,8rem);
}
.next-note-inner{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1rem var(--pad);
  align-items:end;
  padding-top:.6rem;
}
.next-note-inner .eyebrow{grid-column:1/-1}
.next-note-inner .sec-mark{grid-column:1/-1}
.next-note-text{
  margin:clamp(1.6rem,3.5vh,2.4rem) 0 0;
  font-family:var(--serif);
  font-size:clamp(1.25rem,2.2vw,1.6rem);
  line-height:1.8;
  letter-spacing:.08em;
  color:var(--gold-ink);
}
.next-note-sub{
  margin:0;
  font-size:14.5px;
  line-height:2.1;
  color:var(--ink-soft);
}
.next-note-link{
  grid-column:1/7;
  margin-top:clamp(1.5rem,4vh,2.4rem);
  display:inline-flex;
  align-items:center;
  gap:.9rem;
  width:fit-content;
  font-size:13px;
  letter-spacing:.16em;
  color:var(--gold-ink);
  border-bottom:1px solid rgba(134,101,60,.4);
  padding-bottom:.45rem;
  transition:gap .4s var(--ease),border-color .4s var(--ease);
}
.next-note-link:hover{gap:1.4rem;border-color:var(--gold-ink)}

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

@media (max-width:980px){
  .records-head h2{grid-column:1/-1}
  .records-head p:last-child{grid-column:1/-1;text-align:left;margin-top:.8rem}
  .year-log-copy,.year-log-side{grid-column:1/-1}
  .year-log-stats{margin-top:clamp(1.4rem,3vh,2rem)}
  .records-bar{align-items:flex-start;gap:1.1rem}
  .records-search{width:100%}
  .records-search input{width:100%}
  .record-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .next-note-inner{grid-template-columns:repeat(6,1fr)}
  .next-note-text{grid-column:1/7}
  .next-note-sub{grid-column:1/7;margin-top:.6rem}
  .next-note-link{grid-column:1/7}
}

@media (max-width:760px){
  .hero--index .hero-title{font-size:clamp(3rem,14vw,4.8rem)}
  .film-band{min-height:min(70svh,560px)}
  .film-band video{object-position:52% 45%}
  .rec-title{font-size:1.45rem}
}

@media (max-width:600px){
  .record-list,.record-list:has(.rec:nth-child(2):last-child){grid-template-columns:1fr}
  .record-list{gap:2.6rem}
  .rec-media img{aspect-ratio:16/10}
  .chips{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:.35rem;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .records-more{width:100%;justify-content:center}
}

/* ---------- archive links ---------- */

.records-all{
  display:flex;
  align-items:baseline;
  gap:1rem;
  margin-top:clamp(1.6rem,3.6vh,2.4rem);
  padding:1.15rem 0;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--line);
  transition:color .4s var(--ease);
}
.records-all-label{
  font-size:10.5px;
  letter-spacing:.2em;
  color:var(--gold-ink);
  white-space:nowrap;
}
.records-all-text{
  font-family:var(--serif);
  font-size:clamp(1rem,1.8vw,1.25rem);
  letter-spacing:.05em;
}
.records-all .arrow{margin-left:auto;color:var(--gold-ink);transition:transform .45s var(--ease)}
@media (hover:hover){
  .records-all:hover{color:var(--gold-ink)}
  .records-all:hover .arrow{transform:translateX(6px)}
}

.year-log-years{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.5rem .6rem;
}
.year-log-years a{
  display:flex;
  align-items:baseline;
  gap:.55rem;
  padding:.7rem .9rem;
  border:1px solid var(--line);
  font-size:11.5px;
  letter-spacing:.08em;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
  transition:border-color .4s var(--ease),color .4s var(--ease);
}
.year-log-years em{
  font-family:var(--serif);
  font-style:normal;
  font-size:14px;
  letter-spacing:.06em;
  color:var(--ink);
}
.year-log-years .arrow{margin-left:auto;color:var(--gold-ink)}
@media (hover:hover){
  .year-log-years a:hover{border-color:var(--gold-ink)}
  .year-log-years a:hover em{color:var(--gold-ink)}
}

@media (max-width:980px){
  .year-log-years{grid-column:1/-1}
}
@media (max-width:520px){
  .records-all{flex-wrap:wrap;gap:.4rem .8rem}
  .records-all-text{order:3;flex-basis:100%;font-size:1rem}
  .year-log-years{grid-template-columns:1fr 1fr}
}

/* =========================================================
   04 FEATURE — 秀麗富嶽十二景への導線
   十二座の名前をここに全部出して、特集ページの各山へ直で飛べるようにする。
   ========================================================= */
.feature{
  background:var(--paper);
  border-top:1px solid var(--line);
  padding:clamp(3.2rem,8vh,5.4rem) 0 clamp(3.4rem,9vh,5.6rem);
}
.feature-inner{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1.1rem var(--pad);
  align-items:start;
  padding-top:.6rem;
}
.feature-inner .sec-mark{grid-column:1/-1}
.feature-copy{
  grid-column:1/7;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.feature-copy .eyebrow{margin:0 0 .9rem}
.feature h2{
  margin:0;
  font-size:clamp(1.75rem,3.9vw,2.9rem);
  line-height:1.55;
  letter-spacing:.03em;
}
.feature-lead{
  margin:1.15rem 0 0;
  max-width:33em;
  font-size:14.5px;
  line-height:2.05;
  color:var(--ink-soft);
}
.feature-link{
  display:inline-flex;
  align-items:center;
  gap:.9rem;
  margin-top:clamp(1.4rem,3vh,2rem);
  padding-bottom:.45rem;
  font-size:13px;
  letter-spacing:.16em;
  color:var(--gold-ink);
  text-decoration:none;
  border-bottom:1px solid rgba(134,101,60,.4);
  transition:border-color .4s var(--ease),gap .4s var(--ease);
}
@media (hover:hover){
  .feature-link:hover{border-color:var(--gold-ink);gap:1.2rem}
}

.feature-media{
  grid-column:8/13;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.5rem;
}
.feature-media figure{margin:0;overflow:hidden;background:var(--paper-2)}
.feature-media img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  filter:saturate(.95);
  transition:transform .8s var(--ease);
}
.feature-media figure:first-child{grid-column:1/-1}
.feature-media figure:first-child img{aspect-ratio:16/9}
@media (hover:hover){
  .feature-media figure:hover img{transform:scale(1.02)}
}

.feature-peaks{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 clamp(1rem,3vw,2.2rem);
  margin:clamp(1.7rem,4vh,2.7rem) 0 0;
  border-top:1px solid var(--line);
}
.feature-peaks a{
  display:flex;
  align-items:baseline;
  gap:.6rem;
  padding:.72rem .15rem;
  border-bottom:1px solid var(--line);
  font-family:var(--serif);
  font-size:13.5px;
  letter-spacing:.02em;
  color:var(--ink-soft);
  text-decoration:none;
  transition:color .3s var(--ease),padding-left .3s var(--ease);
}
.feature-peaks a em{
  flex:none;
  font-family:var(--sans);
  font-style:normal;
  font-size:10px;
  letter-spacing:.1em;
  color:var(--gold-ink);
  font-variant-numeric:tabular-nums;
}
@media (hover:hover){
  .feature-peaks a:hover{color:var(--ink);padding-left:.5rem}
}

@media (max-width:980px){
  .feature-copy,.feature-media{grid-column:1/-1}
  .feature-media{margin-top:.6rem}
  .feature-peaks{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .feature-peaks{grid-template-columns:1fr}
  .feature-peaks a{font-size:13px}
}

/* ---------- doors（トップの入口） ---------- */
/* ヒーローのすぐ下に、行き先を3つだけ置く。読み物・山行ログ・特集の
   どれを見に来た人も、ここで迷わずに進める。 */
.doors{
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.doors-inner{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 clamp(1.2rem,2.6vw,2.4rem);
  padding-top:clamp(1.6rem,3.4vh,2.4rem);
  padding-bottom:clamp(1.6rem,3.4vh,2.4rem);
}
.door{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:.45rem;
  padding:1.1rem 2.6rem 1.1rem 0;
  border-top:1px solid var(--line);
  color:var(--ink);
  text-decoration:none;
}
.door + .door{border-top:1px solid var(--line)}
.door-kicker{
  font-size:11px;
  letter-spacing:.22em;
  color:var(--gold-ink);
}
.door strong{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.05rem,1.7vw,1.3rem);
  letter-spacing:.04em;
}
.door-note{
  font-size:12px;
  line-height:1.9;
  letter-spacing:.03em;
  color:var(--ink-soft);
}
.door-arrow{
  position:absolute;
  top:1.05rem;
  right:.4rem;
  font-size:15px;
  color:var(--gold-ink);
  transition:transform .4s var(--ease);
}
@media (hover:hover){
  .door:hover .door-arrow{transform:translateX(.35rem)}
  .door:hover strong{color:var(--gold-ink)}
}
@media (max-width:980px){
  .doors-inner{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .doors-inner{grid-template-columns:1fr;gap:0}
  .door{padding:.9rem 2.2rem .9rem 0}
}

/* ---------- 年の記録：歩く速さの推移 ---------- */
.year-pace{
  width:100%;
  max-width:24rem;
  margin:1.6rem 0 0;
  padding-top:1rem;
  border-top:1px solid var(--line);
  font-size:12.5px;
  letter-spacing:.03em;
  color:var(--ink-soft);
}
.year-pace-head{
  display:flex;
  align-items:baseline;
  gap:1rem;
  margin:0;
}
.year-pace-label{
  font-size:11px;
  letter-spacing:.18em;
  color:var(--gold-ink);
}
.year-pace-delta{
  padding:.05rem .45rem;
  border:1px solid rgba(134,101,60,.4);
  color:var(--gold-ink);
  font-size:11px;
  letter-spacing:.08em;
  white-space:nowrap;
}
/* 4本の棒。同じゼロから測っているので、高い棒ほど速い。
   数字がいちばん大事なので、棒の上に値、下に年を置く。 */
.yp-chart{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.7rem;
  margin:1.1rem 0 .2rem;
  padding:0;
  list-style:none;
}
.yp-chart li{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  margin:0;
}
.yp-plot{
  position:relative;
  display:block;
  height:5.2rem;
  border-bottom:1px solid var(--line);
}
.yp-plot i{
  position:absolute;
  left:50%;
  bottom:0;
  display:block;
  width:min(100%,2.4rem);
  transform:translateX(-50%);
  background:linear-gradient(to top,rgba(189,154,104,.42),rgba(189,154,104,.72));
}
.yp-plot b{
  position:absolute;
  left:50%;
  bottom:100%;
  transform:translateX(-50%);
  margin-bottom:.35rem;
  font-family:var(--serif);
  font-weight:400;
  font-size:12.5px;
  line-height:1;
  letter-spacing:.01em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.yp-chart li.is-last .yp-plot i{background:var(--gold-ink)}
.yp-chart em{
  font-style:normal;
  font-size:10.5px;
  letter-spacing:.14em;
  color:var(--ink-soft);
  text-align:center;
}
.year-pace-foot{
  margin:.9rem 0 0;
  font-size:11.5px;
  line-height:1.9;
  color:var(--ink-soft);
}
.year-pace-foot b{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.15em;
  color:var(--gold-ink);
}
.year-pace-link{
  margin-left:.4rem;
  color:var(--gold-ink);
  text-decoration:none;
  border-bottom:1px solid rgba(134,101,60,.4);
  padding-bottom:.05rem;
  white-space:nowrap;
}

/* ---------- portal（山を探す） ---------- */
/* ヒーローと入口のすぐ下に、全180回への近道をまとめて置く。
   紙を一段沈めた帯にして、本文とは別の「索引」だと分かるようにする。 */
.portal{
  background:var(--paper-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:clamp(2.4rem,6vh,3.6rem) 0 clamp(2.4rem,6vh,3.6rem);
}
.portal-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,26rem);
  align-items:end;
  gap:.6rem clamp(1rem,3vw,2.4rem);
  margin-bottom:clamp(1.8rem,4vh,2.6rem);
}
.portal-head .sec-mark{grid-column:1/-1;margin-bottom:.7rem}
.portal-head h2{
  font-size:clamp(1.5rem,2.8vw,2.1rem);
  letter-spacing:.05em;
}
.portal-head p:last-child{
  margin:0;
  font-size:13.5px;
  line-height:1.95;
  color:var(--ink-soft);
  text-align:right;
}

.portal-block + .portal-block{margin-top:clamp(1.6rem,3.6vh,2.4rem)}
.portal-label{
  display:flex;
  align-items:baseline;
  gap:.8rem;
  margin:0 0 .8rem;
  font-size:10.5px;
  letter-spacing:.24em;
  color:var(--gold-ink);
}
.portal-label span{
  font-size:10px;
  letter-spacing:.1em;
  color:rgba(21,22,15,.45);
}

/* エリアは5列。名前と回数だけの、索引らしい札。 */
.portal-areas{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1px;
  list-style:none;
  margin:0;
  padding:0;
  background:var(--line);
  border:1px solid var(--line);
}
.portal-areas a{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  gap:.1rem .5rem;
  height:100%;
  padding:.85rem .9rem .8rem;
  background:var(--paper);
  transition:background .35s var(--ease),color .35s var(--ease);
}
.pa-name{
  font-family:var(--serif);
  font-size:14.5px;
  letter-spacing:.04em;
  line-height:1.4;
}
.pa-kana{
  grid-column:1;
  font-size:9.5px;
  letter-spacing:.1em;
  color:var(--ink-soft);
}
.pa-n{
  grid-column:2;
  grid-row:1;
  font-family:var(--serif);
  font-size:13px;
  color:var(--gold-ink);
  font-variant-numeric:tabular-nums;
}
@media (hover:hover){
  .portal-areas a:hover{background:var(--ink);color:var(--paper)}
  .portal-areas a:hover .pa-kana{color:rgba(241,237,228,.62)}
  .portal-areas a:hover .pa-n{color:var(--gold-soft)}
}

/* テーマと年は、横に流れる札。 */
.portal-themes,.portal-years{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  list-style:none;
  margin:0;
  padding:0;
}
.portal-themes a,.portal-years a{
  display:inline-flex;
  align-items:baseline;
  gap:.55rem;
  padding:.5rem .9rem .46rem;
  border:1px solid rgba(21,22,15,.22);
  background:var(--paper);
  font-size:13px;
  letter-spacing:.06em;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.portal-themes a span,.portal-years a span{
  font-size:10.5px;
  letter-spacing:.06em;
  color:var(--gold-ink);
  font-variant-numeric:tabular-nums;
}
@media (hover:hover){
  .portal-themes a:hover,.portal-years a:hover{
    background:var(--ink);border-color:var(--ink);color:var(--paper);
  }
  .portal-themes a:hover span,.portal-years a:hover span{color:var(--gold-soft)}
}

.portal-block--years{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.6rem}
.portal-block--years .portal-label{margin:0}
.portal-all{margin:0 0 0 auto}
.portal-all a{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding-bottom:.3rem;
  border-bottom:1px solid var(--gold-ink);
  font-size:12.5px;
  letter-spacing:.1em;
  color:var(--ink);
  transition:color .4s var(--ease),gap .4s var(--ease);
}
@media (hover:hover){
  .portal-all a:hover{color:var(--gold-ink);gap:.9rem}
}

@media (max-width:980px){
  .portal-head{grid-template-columns:1fr}
  .portal-head p:last-child{text-align:left;margin-top:.5rem}
  .portal-areas{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:600px){
  .portal-areas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portal-block--years{gap:.6rem 1rem}
  .portal-all{margin:0}
}

/* ---------- ポータル：検索・テーマの束ね・料理 ----------
   カテゴリーが増えて「どこに何があるか」が分からなくなったので、
   上から 検索 → エリア → テーマ → 料理 → 年 の順に、同じ高さで並べる。 */
.portal-search{
  margin:0 0 clamp(1.6rem,3.6vh,2.4rem);
  padding-bottom:clamp(1.4rem,3vh,2rem);
  border-bottom:1px solid var(--line);
}
.ps-label{
  display:block;
  margin:0 0 .6rem;
  font-size:10.5px;
  letter-spacing:.24em;
  color:var(--gold-ink);
}
.ps-field{display:flex;max-width:44rem}
.ps-input{
  flex:1;
  min-width:0;
  padding:.85rem 1rem .8rem;
  border:1px solid rgba(21,22,15,.22);
  border-right:0;
  background:var(--paper);
  font-family:var(--sans);
  font-size:15px;
  letter-spacing:.05em;
  color:var(--ink);
  border-radius:0;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.ps-input::placeholder{color:rgba(21,22,15,.36)}
.ps-input:focus{outline:none;border-color:var(--gold-ink);background:#fff}
.ps-go{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:0 1.2rem;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.16em;
  cursor:pointer;
  transition:background-color .35s var(--ease),border-color .35s var(--ease),gap .35s var(--ease);
}
.ps-go span{font-size:12px}
@media (hover:hover){
  .ps-go:hover{background:var(--gold-ink);border-color:var(--gold-ink);gap:.8rem}
}
.ps-hint{
  margin:.6rem 0 0;
  font-size:11.5px;
  letter-spacing:.05em;
  color:rgba(21,22,15,.45);
}

/* テーマは3つの束に。平らに8つ並べるのをやめる。 */
.portal-groups{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.1rem clamp(1rem,2.4vw,2.2rem);
}
.portal-group{display:flex;flex-direction:column;gap:.55rem}
.portal-sub{
  margin:0;
  font-size:10.5px;
  letter-spacing:.18em;
  color:rgba(21,22,15,.48);
}
.portal-group .portal-themes a{padding:.42rem .8rem .38rem;font-size:12.5px}

/* 料理は名前と回数で。7つに分かれていること自体を見せる。
   罫線はセル側に引く（7つを4列に並べると最後の1マスが空くので、
   面で塗る grid-gap 方式だと空きマスが灰色に見えてしまう）。 */
.portal-dishes{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  list-style:none;
  margin:0 0 .9rem;
  padding:0;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.portal-dishes > li{
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.portal-dishes a{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  height:100%;
  padding:.8rem .85rem .75rem;
  background:var(--paper);
  transition:background-color .35s var(--ease),color .35s var(--ease);
}
.pd-name{
  font-family:var(--serif);
  font-size:13px;
  line-height:1.55;
  letter-spacing:.02em;
}
.pd-n{
  font-family:var(--serif);
  font-size:15px;
  color:var(--gold-ink);
  font-variant-numeric:tabular-nums;
  transition:color .35s var(--ease);
}
@media (hover:hover){
  .portal-dishes a:hover{background:var(--ink);color:var(--paper)}
  .portal-dishes a:hover .pd-n{color:var(--gold-soft)}
}
@media (max-width:980px){
  .portal-groups{grid-template-columns:1fr 1fr}
  .portal-dishes{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:600px){
  .portal-groups{grid-template-columns:1fr}
  .portal-dishes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ps-field{flex-wrap:wrap}
  .ps-input{flex:1 1 100%;border-right:1px solid rgba(21,22,15,.22);border-bottom:0}
  .ps-go{flex:1 1 100%;justify-content:center;padding:.75rem 1rem}
}

/* ---------- scale（180回の帯） ---------- */
/* ヒーローのすぐ下で、回数を先に出す。7本の山日記だけが目に入って、
   記録が7本しかないと読まれるのを避ける。 */
.scale{
  background:var(--night);
  color:var(--paper);
}
.scale-inner{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1.1rem var(--pad);
  padding-top:clamp(1.7rem,3.6vh,2.5rem);
  padding-bottom:clamp(1.7rem,3.6vh,2.5rem);
}
.scale-lead{
  grid-column:1/-1;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.3rem 1.2rem;
  margin:0;
  font-size:12.5px;
  line-height:2;
  letter-spacing:.04em;
  color:rgba(241,237,228,.66);
}
.scale-lead b{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1rem,1.7vw,1.25rem);
  letter-spacing:.06em;
  color:var(--paper);
}
.scale-nums{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 clamp(1rem,2.6vw,2.6rem);
  margin:.4rem 0 0;
}
.scale-nums div{
  padding-top:.7rem;
  border-top:1px solid rgba(241,237,228,.24);
}
.scale-nums dt{
  font-size:10.5px;
  letter-spacing:.16em;
  color:rgba(241,237,228,.58);
}
.scale-nums dd{
  margin:.3rem 0 0;
  white-space:nowrap;
  font-family:var(--serif);
  font-size:clamp(1.5rem,3.4vw,2.7rem);
  line-height:1.05;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.scale-nums em{
  font-style:normal;
  font-family:var(--sans);
  font-size:10.5px;
  letter-spacing:.14em;
  margin-left:.4em;
  color:rgba(241,237,228,.58);
}

/* ---------- 最新の記録 ---------- */
.next-note-inner{align-items:start}
.next-note-copy{grid-column:1/6}
.next-note-copy h2{
  margin:.7rem 0 1.1rem;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.7rem,3.2vw,2.5rem);
  line-height:1.5;
  letter-spacing:.05em;
}
.next-note-card{grid-column:7/13;margin-top:clamp(1.4rem,3vh,2rem)}
.latest-card{
  display:block;
  background:var(--paper-2);
  border:1px solid var(--line);
  color:var(--ink);
  text-decoration:none;
}
.latest-media{
  margin:0;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--paper);
}
.latest-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .9s var(--ease);
}
.latest-body{padding:1.1rem 1.2rem 1.25rem}
.latest-date{
  display:flex;
  align-items:baseline;
  gap:.8rem;
  margin:0;
  font-size:11px;
  letter-spacing:.14em;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.latest-date span{color:var(--gold-ink)}
.latest-title{
  margin:.5rem 0 .85rem;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.05rem,1.9vw,1.3rem);
  line-height:1.65;
  letter-spacing:.02em;
}
.latest-stats{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.5rem;
  margin:0;
  padding-top:.75rem;
  border-top:1px solid var(--line);
}
.latest-stats div{display:flex;align-items:baseline;gap:.4rem}
.latest-stats dt{font-size:10.5px;letter-spacing:.1em;color:var(--ink-soft)}
.latest-stats dd{
  margin:0;
  font-family:var(--serif);
  font-size:1rem;
  font-variant-numeric:tabular-nums;
}
.latest-stats small{font-size:9.5px;letter-spacing:.08em;color:var(--ink-soft)}
.latest-go{
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  margin-top:1rem;
  font-size:12px;
  letter-spacing:.14em;
  color:var(--gold-ink);
}
@media (hover:hover){
  .latest-card:hover .latest-media img{transform:scale(1.035)}
  .latest-card:hover .latest-title{color:var(--gold-ink)}
}

/* 見出しを外した映像の、一行だけの説明 */
.film-cap{
  max-width:600px;
  margin:0;
  font-size:13.5px;
  line-height:2.1;
  letter-spacing:.04em;
  color:rgba(241,237,228,.76);
}

@media (max-width:980px){
  .scale-nums{margin-top:.8rem}
  .next-note-copy,.next-note-card{grid-column:1/7}
  .next-note-card{margin-top:1.4rem}
}
@media (max-width:600px){
  .scale-nums{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
  .scale-nums dd{font-size:clamp(1.4rem,7vw,2rem)}
}

/* Find a hike before browsing the stories. */
.hero--index{min-height:min(780px,92svh)}
.hero--index .hero-title{font-size:clamp(2.4rem,5.6vw,5rem);line-height:1.35;letter-spacing:.03em}
.hero--index .hero-sub{margin-bottom:1.5rem;letter-spacing:.05em}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 1.8rem}
.hero-actions a{display:inline-flex;align-items:center;gap:24px;padding:13px 21px;border:1px solid #e5e1d5;border-radius:3px;font-size:14px;background:var(--paper);color:var(--ink)}
.hero-actions a+a{background:rgba(10,16,15,.4);color:#fff}
.hero-actions a:hover{outline:2px solid #fff;outline-offset:3px}
.hero--index .scroll-cue{display:none}
.portal{padding-top:clamp(2.5rem,6vw,5rem)}
.discover{background:var(--paper-2);padding:clamp(3rem,6vw,5rem) 0}
.discover h2{font-size:clamp(1.7rem,3vw,2.8rem);line-height:1.5;margin:1rem 0 2rem}
.discover-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.discover-card{display:block;background:var(--paper);border:1px solid var(--line);border-radius:5px;overflow:hidden;transition:transform .2s}
.discover-card:hover{transform:translateY(-4px)}
.discover-card img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.discover-card>div{padding:22px}
.discover-tag{font-size:12px;color:var(--gold-ink);letter-spacing:.1em}
.discover-card h3{font-size:clamp(1.3rem,2vw,1.8rem);margin:10px 0;line-height:1.5}
.discover-card p{font-size:14px;line-height:1.9;color:var(--ink-soft);margin:0 0 18px}
.discover-link{font-size:13px;border-bottom:1px solid var(--line);padding-bottom:5px}
@media(max-width:600px){
.hero--index{min-height:690px;min-height:90svh}
.hero--index .hero-inner{padding-top:110px;padding-bottom:44px}
.hero--index .hero-title{font-size:clamp(2rem,7.7vw,3rem)}
.hero--index .hero-sub{font-size:14px;line-height:1.9}
.hero--index .hero-meta{font-size:10px;gap:.5rem;letter-spacing:.05em;flex-wrap:wrap}
.hero-actions a{font-size:12px;padding:11px 13px;gap:12px}
.discover-grid{grid-template-columns:1fr;gap:18px}
.discover-card{display:grid;grid-template-columns:36% 1fr}
.discover-card img{height:100%;aspect-ratio:auto;min-height:190px}
.discover-card>div{padding:18px}
.discover-card h3{font-size:1.25rem}
.discover-card p{font-size:12px;margin-bottom:12px}
}
.portal-options{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:26px;padding:20px 0}
.portal-options summary{font-size:15px;cursor:pointer;padding:8px 0;color:var(--gold-ink)}
.portal-options[open] summary{margin-bottom:24px}