/* =========================================================
   山特集 — 「ひろむん山特集」
   特集の入口。秀麗富嶽十二景を特別なものとして大きく出し、
   その下に山日記（文章で読む7本）を並べる。
   style.css のトークンと .hero / .sec-mark を借りる。
   ========================================================= */

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

.tk-hero{min-height:min(78svh,720px)}
.tk-hero .hero-veil{
  z-index:1;
  background:
    linear-gradient(180deg,rgba(6,7,5,.66) 0%,rgba(6,7,5,.16) 28%,rgba(6,7,5,.3) 56%,rgba(6,7,5,.86) 100%),
    linear-gradient(94deg,rgba(6,7,5,.6) 0%,rgba(6,7,5,.28) 42%,rgba(6,7,5,.02) 76%),
    radial-gradient(88% 72% at 8% 90%,rgba(6,7,5,.44),rgba(6,7,5,0) 66%);
}
.tk-hero .hero-inner{position:relative;z-index:2}
.tk-hero-title{
  margin:1rem 0 1.2rem;
  font-size:clamp(2.5rem,9vw,4.4rem);
  line-height:1.24;
  letter-spacing:.1em;
}
.tk-hero .hero-sub{
  max-width:32em;
  font-size:clamp(.9rem,1.5vw,1.02rem);
  line-height:2.05;
}

/* ---------- 01 秀麗富嶽十二景（特別特集） ---------- */

.tk-feature{
  padding:clamp(2.6rem,7vh,4.4rem) 0 clamp(3rem,7.5vh,4.8rem);
  background:var(--paper);
}
.tk-card{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(1.4rem,3.6vw,3.2rem);
  align-items:center;
  margin-top:clamp(1.4rem,3.4vh,2.2rem);
  text-decoration:none;
  color:inherit;
}
.tk-card-media{
  position:relative;
  margin:0;
  overflow:hidden;
  background:var(--paper-2);
}
.tk-card-media img{
  display:block;
  width:100%;
  height:auto;
  transition:transform 1.2s var(--ease);
}
.tk-card-tag{
  position:absolute;
  left:0;
  top:0;
  padding:.6rem 1.1rem;
  background:var(--gold-ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:10.5px;
  letter-spacing:.18em;
  line-height:1.2;
}
.tk-card-kicker{
  margin:0;
  font-family:var(--sans);
  font-size:10.5px;
  letter-spacing:.18em;
  color:var(--gold-ink);
}
.tk-card-title{
  margin:.9rem 0 1.1rem;
  font-size:clamp(1.9rem,4.4vw,3.2rem);
  line-height:1.32;
  letter-spacing:.08em;
  transition:color .4s var(--ease);
}
.tk-card-lead{
  margin:0;
  font-size:13.5px;
  line-height:2.05;
  letter-spacing:.03em;
  color:var(--ink-soft);
}
.tk-nums{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.6rem;
  margin:clamp(1.2rem,3vh,1.9rem) 0 0;
  padding:clamp(.9rem,2.4vh,1.3rem) 0 0;
  border-top:1px solid var(--line);
}
.tk-nums div{display:block}
.tk-nums dt{
  font-family:var(--sans);
  font-size:9.5px;
  letter-spacing:.14em;
  color:var(--ink-soft);
}
.tk-nums dd{
  margin:.25rem 0 0;
  font-family:var(--serif);
  font-size:clamp(1.35rem,2.8vw,1.9rem);
  letter-spacing:.04em;
  color:var(--gold-ink);
  font-variant-numeric:tabular-nums;
}
.tk-nums dd small{
  margin-left:.12em;
  font-size:10.5px;
  letter-spacing:.08em;
  color:var(--ink-soft);
}
.tk-card-more{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  margin-top:clamp(1.2rem,3vh,1.9rem);
  font-family:var(--sans);
  font-size:11.5px;
  letter-spacing:.16em;
  color:var(--gold-ink);
  border-bottom:1px solid rgba(134,101,60,.35);
  padding-bottom:.35rem;
}
@media (hover:hover){
  .tk-card:hover .tk-card-title{color:var(--gold-ink)}
  .tk-card:hover .tk-card-media img{transform:scale(1.03)}
}

/* ---------- 02 山日記 ---------- */

.tk-nikki{
  padding:clamp(2.6rem,7vh,4.4rem) 0 clamp(3.2rem,8vh,5rem);
  background:var(--paper-2);
}
.tk-nikki-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,24rem);
  gap:clamp(1rem,3vw,2.4rem);
  align-items:end;
  margin:clamp(1.2rem,3vh,1.8rem) 0 clamp(1.4rem,3.5vh,2.2rem);
}
.tk-nikki-head h2{
  font-size:clamp(1.6rem,3.6vw,2.4rem);
  line-height:1.5;
  letter-spacing:.08em;
}
.tk-nikki-head p{
  margin:0;
  font-size:13px;
  line-height:2;
  letter-spacing:.04em;
  color:var(--ink-soft);
}
.tk-list{list-style:none;margin:0;padding:0}
.tk-list li{border-top:1px solid var(--line)}
.tk-list li:last-child{border-bottom:1px solid var(--line)}
.tk-list a{
  display:grid;
  grid-template-columns:9.5rem minmax(0,1fr) auto 1.4rem;
  gap:.4rem 1.2rem;
  align-items:center;
  padding:1.05rem .2rem;
  text-decoration:none;
  color:inherit;
  transition:background .3s var(--ease),padding-left .3s var(--ease);
}
.tk-list a:hover,
.tk-list a:focus-visible{background:rgba(189,154,104,.14);padding-left:.6rem}
.tk-r-date{
  font-family:var(--sans);
  font-size:11.5px;
  letter-spacing:.09em;
  color:var(--gold-ink);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.tk-r-main{display:grid;gap:.3rem}
.tk-r-name{
  font-family:var(--serif);
  font-size:clamp(1.05rem,2vw,1.28rem);
  letter-spacing:.04em;
  line-height:1.4;
}
.tk-r-sub{
  font-size:12px;
  line-height:1.8;
  letter-spacing:.02em;
  color:var(--ink-soft);
}
.tk-r-kind{
  justify-self:start;
  font-family:var(--sans);
  font-size:9.5px;
  letter-spacing:.12em;
  color:var(--ink-soft);
  border:1px solid rgba(134,101,60,.28);
  border-radius:999px;
  padding:.28rem .6rem;
  white-space:nowrap;
}
.tk-r-arrow{color:var(--gold-ink);font-size:14px;line-height:1}

/* ---------- closing ---------- */

.tk-closing{
  padding:clamp(3.4rem,9vh,6rem) 0;
  background:var(--night);
  color:var(--paper);
}
.tk-closing-inner{max-width:720px}
.tk-closing-inner h2{
  margin:1rem 0 1.2rem;
  font-size:clamp(1.7rem,4.2vw,2.9rem);
  line-height:1.5;
  letter-spacing:.06em;
}
.tk-closing-inner > p{
  margin:0;
  font-size:13.5px;
  line-height:2.05;
  letter-spacing:.04em;
  color:rgba(241,237,228,.66);
}
.tk-close-links{
  display:flex;
  flex-wrap:wrap;
  gap:1rem 2.2rem;
  margin-top:clamp(1.8rem,4.4vh,2.6rem);
}
.tk-close-links a{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  font-family:var(--sans);
  font-size:11.5px;
  letter-spacing:.16em;
  color:var(--gold-soft);
  text-decoration:none;
  border-bottom:1px solid rgba(216,195,160,.42);
  padding-bottom:.35rem;
}
.tk-close-links a:hover{color:var(--paper);border-color:var(--paper)}

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

@media (max-width:900px){
  .tk-card{
    grid-template-columns:1fr;
    gap:clamp(1.1rem,4vw,1.6rem);
  }
  .tk-card-media img{max-height:56svh;object-fit:cover}
  .tk-nums{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (max-width:700px){
  .tk-hero{min-height:min(84svh,660px)}
  .tk-nikki-head{grid-template-columns:1fr;gap:.9rem;align-items:start}
  .tk-nums{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 1.2rem}
  .tk-list a{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "date kind"
      "main main";
    gap:.5rem .8rem;
    padding:.95rem .2rem;
  }
  .tk-r-date{grid-area:date}
  .tk-r-main{grid-area:main}
  .tk-r-kind{grid-area:kind;justify-self:end;align-self:center}
  .tk-r-arrow{display:none}
}

@media (max-width:420px){
  .tk-hero-title{letter-spacing:.05em}
  .tk-card-title{font-size:1.9rem}
}