/* =========================================================
   秀麗富嶽十二景 — 「ひろむん秀麗富嶽十二景の歩み」
   style.css のトークンと .hero / .closing を借りて、
   12エリア・20座の一覧とエリアごとの記録だけをここで定義する。
   ========================================================= */

/* ---------- hero（明るい写真の上でも文字が沈まないように） ---------- */

.sp-hero{min-height:min(84svh,780px)}
.sp-hero .hero-veil{
  z-index:1;
  background:
    linear-gradient(180deg,rgba(6,7,5,.7) 0%,rgba(6,7,5,.2) 26%,rgba(6,7,5,.28) 54%,rgba(6,7,5,.85) 100%),
    linear-gradient(94deg,rgba(6,7,5,.62) 0%,rgba(6,7,5,.3) 40%,rgba(6,7,5,.02) 74%),
    radial-gradient(88% 72% at 8% 90%,rgba(6,7,5,.46),rgba(6,7,5,0) 66%);
}
.sp-hero .hero-inner{z-index:2}

.sp-hero .hero-title{
  margin:1rem 0 1.4rem;
  font-size:clamp(2.1rem,8.4vw,4rem);
  line-height:1.24;
  letter-spacing:.06em;
}
.sp-hero-title span:last-child{padding-left:0}
.sp-hero .hero-sub{
  max-width:34em;
  font-size:clamp(.9rem,1.5vw,1.02rem);
  line-height:2.05;
}
.sp-hero .hero-title,
.sp-hero .hero-sub,
.sp-hero .hero-meta,
.sp-hero .eyebrow{
  text-shadow:0 1px 2px rgba(0,0,0,.62),0 2px 20px rgba(0,0,0,.55);
}
.sp-hero .hero-meta{color:rgba(241,237,228,.92)}

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

.sp-intro{padding:clamp(4.5rem,11vh,8rem) 0 clamp(3rem,7vh,5rem)}
.sp-intro-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  gap:clamp(1.6rem,4vw,3.6rem);
  align-items:start;
}
.sp-intro-grid > .eyebrow{grid-column:1/-1}
.sp-intro-title{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(2rem,4.6vw,3.4rem);
  line-height:1.5;
  letter-spacing:.04em;
}
.sp-intro-body{max-width:560px}
.sp-intro-body p{
  margin:0 0 1.1em;
  font-size:15px;
  line-height:2.15;
  color:var(--ink-soft);
}
.sp-intro-body p:last-child{margin-bottom:0}
.sp-intro-meta{
  grid-column:1/-1;
  display:flex;
  flex-wrap:wrap;
  gap:0;
  margin:clamp(1.6rem,4vh,2.6rem) 0 0;
  border-top:1px solid var(--line);
}
.sp-intro-meta > div{
  flex:1 1 120px;
  padding:1.1rem 0 0;
  margin-right:clamp(1.2rem,4vw,2.6rem);
  border-top:1px solid transparent;
}
.sp-intro-meta dt{
  font-family:var(--sans);
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-ink);
}
.sp-intro-meta dd{
  margin:.35rem 0 0;
  font-family:var(--serif);
  font-size:clamp(1.25rem,2.4vw,1.7rem);
  letter-spacing:.04em;
}

/* ---------- index（12エリアの一覧） ---------- */

.sp-index-band{
  padding:clamp(2.6rem,7vh,4.4rem) 0 clamp(3.4rem,9vh,5.6rem);
  background:var(--paper-2);
}
.sp-index{
  list-style:none;
  margin:clamp(1.5rem,4vh,2.4rem) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(1.5rem,4vw,3rem);
}
.sp-index li{border-top:1px solid var(--line)}
.sp-index a{
  display:grid;
  grid-template-columns:3.2rem minmax(0,1fr) auto;
  grid-template-areas:
    "no name count"
    "no kana count";
  align-items:center;
  column-gap:.9rem;
  padding:.85rem .2rem .85rem 0;
  text-decoration:none;
  color:inherit;
  transition:background .3s var(--ease),padding .3s var(--ease);
}
.sp-index a:hover,.sp-index a:focus-visible{background:rgba(189,154,104,.12);padding-left:.5rem}
.sp-i-no{
  grid-area:no;
  font-family:var(--serif);
  font-size:1.15rem;
  color:var(--gold-ink);
  letter-spacing:.06em;
}
.sp-i-name{
  grid-area:name;
  font-family:var(--serif);
  font-size:clamp(1rem,1.9vw,1.15rem);
  letter-spacing:.03em;
  line-height:1.45;
}
.sp-i-kana{
  grid-area:kana;
  font-family:var(--sans);
  font-size:9.5px;
  letter-spacing:.1em;
  color:var(--ink-soft);
  opacity:.72;
}
.sp-i-count{
  grid-area:count;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--ink-soft);
  white-space:nowrap;
}

/* ---------- エリアごとの記録 ---------- */

.sp-area{
  padding:clamp(3.2rem,8vh,5.4rem) 0;
  border-top:1px solid var(--line);
}
.sp-area:nth-of-type(even){background:var(--paper-2)}
.sp-area-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(1.4rem,3.6vw,3rem) clamp(1.6rem,4vw,3.4rem);
  align-items:start;
}
.sp-area-head{grid-column:1}
.sp-area-no{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(2.6rem,6vw,4rem);
  line-height:1;
  color:var(--gold-ink);
  letter-spacing:.04em;
}
.sp-area-no span{
  font-size:.34em;
  letter-spacing:.14em;
  color:var(--ink-soft);
  opacity:.7;
  margin-left:.3em;
}
.sp-area-name{
  margin:.9rem 0 0;
  font-family:var(--serif);
  font-size:clamp(1.5rem,3.2vw,2.25rem);
  line-height:1.45;
  letter-spacing:.04em;
}
.sp-area-lede{
  margin:1rem 0 0;
  font-size:14.5px;
  line-height:2.05;
  color:var(--ink-soft);
  max-width:34em;
}

/* 山ごとの写真（カード） */
.sp-area-peaks{
  grid-column:1/-1;
  list-style:none;
  margin:clamp(1.6rem,4vh,2.6rem) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.1rem,3vw,2.2rem);
}
.sp-area-peaks:has(> :only-child){grid-template-columns:minmax(0,1fr);max-width:640px}

.pk-frame{
  position:relative;
  aspect-ratio:3/2;
  overflow:hidden;
  background:var(--paper-3,rgba(0,0,0,.06));
  border:1px solid var(--line);
  touch-action:pan-y;
}
.pk-frame:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}
.pk-track,.pk-slide{position:absolute;inset:0}
.pk-slide{
  margin:0;
  opacity:0;
  transition:opacity .85s var(--ease);
  pointer-events:none;
}
.pk-slide.is-active{opacity:1;pointer-events:auto}
.pk-slide img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 46%;
  filter:saturate(.98);
}
.pk-cap{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:1.7rem .85rem .6rem;
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:.14em;
  color:var(--paper);
  background:linear-gradient(to top,rgba(8,9,8,.72),rgba(8,9,8,.28) 46%,rgba(8,9,8,0));
  text-shadow:0 1px 5px rgba(0,0,0,.6);
}
.pk-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(241,237,228,.42);
  background:rgba(11,12,10,.4);
  color:var(--paper);
  cursor:pointer;
  opacity:0;
  transition:opacity .3s var(--ease),background .3s var(--ease);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}
.pk-prev{left:.55rem}
.pk-next{right:.55rem}
.pk-btn svg{width:15px;height:15px}
.pk:hover .pk-btn,.pk:focus-within .pk-btn{opacity:1}
.pk-btn:hover,.pk-btn:focus-visible{background:rgba(11,12,10,.7);opacity:1}
.pk-dots{
  position:absolute;
  right:.5rem;
  bottom:.5rem;
  display:flex;
  gap:.1rem;
  z-index:2;
}
.pk-dot{
  display:flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:22px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
}
.pk-dot::before{
  content:"";
  display:block;
  width:12px;
  height:2px;
  background:rgba(241,237,228,.45);
  transition:background .3s var(--ease),width .3s var(--ease);
}
.pk-dot:hover::before{background:rgba(241,237,228,.85)}
.pk-dot.is-active::before{width:12px;background:var(--gold-soft,#d8c3a0)}
.pk-dot:focus-visible{outline:2px solid var(--gold-soft,#d8c3a0);outline-offset:-2px}
.pk-meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin-top:.7rem;
}
.pk-name{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.02rem,1.9vw,1.18rem);
  line-height:1.45;
  letter-spacing:.03em;
}
.pk-kana{
  margin:.12rem 0 0;
  font-family:var(--sans);
  font-size:9.5px;
  letter-spacing:.12em;
  color:var(--ink-soft);
  opacity:.72;
}
.pk-count{
  display:flex;
  align-items:baseline;
  gap:.1em;
  margin:0;
  font-family:var(--sans);
  font-size:10.5px;
  letter-spacing:.1em;
  color:var(--ink-soft);
  white-space:nowrap;
}
.pk-count b{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.5rem;
  line-height:1;
  letter-spacing:.02em;
  color:var(--gold-ink);
  margin-right:.12em;
}

.sp-area-sum{
  margin:1rem 0 0;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--gold-ink);
}
.sp-area-sum b{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.35rem;
  letter-spacing:.02em;
}

.sp-area-figure{grid-column:2;margin:0}
.sp-area-figure img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
  filter:saturate(.98);
  background:var(--paper-3,rgba(0,0,0,.06));
}
.sp-area-figure figcaption{
  margin-top:.7rem;
  font-family:var(--sans);
  font-size:10.5px;
  letter-spacing:.1em;
  color:var(--ink-soft);
  opacity:.85;
}

/* ヤマップの活動日記から引いた一節 */
.sp-quote{
  grid-column:1/-1;
  margin:clamp(1.4rem,3.4vh,2.2rem) 0 0;
  padding:clamp(1.1rem,2.6vw,1.6rem) 0 clamp(1.1rem,2.6vw,1.6rem) clamp(1.2rem,2.8vw,2rem);
  max-width:48em;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-left:2px solid var(--gold-ink);
}
.sp-quote p{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1rem,1.85vw,1.22rem);
  line-height:2.05;
  letter-spacing:.035em;
  color:var(--ink);
}
.sp-quote footer{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.5rem 1.1rem;
  margin-top:1rem;
  font-family:var(--sans);
  font-size:10.5px;
  letter-spacing:.14em;
  color:var(--ink-soft);
}
.sp-quote cite{
  font-style:normal;
  color:var(--gold-ink);
}
.sp-quote footer a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid var(--line);
  padding-bottom:.18rem;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.sp-quote footer a:hover,.sp-quote footer a:focus-visible{
  color:var(--gold-ink);
  border-color:var(--gold-ink);
}

/* 山行の一覧 */
.sp-asc-list{
  grid-column:1/-1;
  list-style:none;
  margin:clamp(1.2rem,3.2vh,2rem) 0 0;
  padding:0;
}
.sp-asc-list li{border-top:1px solid var(--line)}
.sp-asc{
  display:grid;
  grid-template-columns:5.6rem minmax(0,1fr) auto 1.4rem;
  align-items:baseline;
  column-gap:clamp(.6rem,2vw,1.4rem);
  padding:.95rem .2rem;
  text-decoration:none;
  color:inherit;
  transition:background .3s var(--ease),padding-left .3s var(--ease);
}
.sp-asc:hover,.sp-asc:focus-visible{background:rgba(189,154,104,.14);padding-left:.6rem}
.sp-asc-date{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--gold-ink);
  white-space:nowrap;
}
.sp-asc-title{
  display:block;
  font-family:var(--serif);
  font-size:14.5px;
  line-height:1.6;
  letter-spacing:.02em;
  overflow-wrap:anywhere;
}
.sp-asc-peaks{
  display:block;
  margin-top:.2rem;
  font-family:var(--sans);
  font-size:9.5px;
  letter-spacing:.1em;
  color:var(--ink-soft);
  opacity:.8;
}
.sp-asc-nums{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:.35rem clamp(.6rem,1.6vw,1.2rem);
}
.sp-asc-nums span{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--ink-soft);
  white-space:nowrap;
}
.sp-asc-nums .sp-asc-ratio{color:var(--gold-ink)}
.sp-asc-go{
  font-size:12px;
  color:var(--gold-ink);
  text-align:right;
  transition:transform .3s var(--ease);
}
.sp-asc:hover .sp-asc-go{transform:translateX(3px)}

/* ---------- 眺めのスライドショー（12エリアを一巡） ---------- */

.sp-views{
  background:var(--night);
  color:var(--paper);
  padding:clamp(3.4rem,8vh,5.6rem) 0 clamp(3.2rem,7vh,5rem);
}
.sp-views-head{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(1rem,3vw,3rem);
  align-items:end;
  margin:clamp(1.4rem,4vh,2.2rem) 0 clamp(1.5rem,4vh,2.4rem);
}
.sp-views-title{
  margin:0;
  font-size:clamp(1.7rem,4.2vw,2.85rem);
  line-height:1.55;
  letter-spacing:.05em;
}
.sp-views-lead{
  margin:0;
  max-width:36em;
  font-size:13.5px;
  line-height:2.05;
  color:rgba(241,237,228,.64);
}

.sv{position:relative}
.sv-frame{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#070806;
  border:1px solid rgba(241,237,228,.13);
  touch-action:pan-y;
}
.sv-frame:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.sv-track{position:absolute;inset:0}
.sv-slide{
  position:absolute;
  inset:0;
  margin:0;
  opacity:0;
  transition:opacity 1s var(--ease);
  pointer-events:none;
}
.sv-slide.is-active{opacity:1;pointer-events:auto}
.sv-slide img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 42%;
  transform:scale(1.001);
  transition:transform 8s linear;
}
.sv-slide.is-active img{transform:scale(1.055)}
.sv-shade{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(0deg,rgba(6,7,5,.88) 0%,rgba(6,7,5,.46) 20%,rgba(6,7,5,0) 46%),
    linear-gradient(180deg,rgba(6,7,5,.3) 0%,rgba(6,7,5,0) 24%);
}
.sv-cap{
  position:absolute;
  left:clamp(1.1rem,3vw,2.4rem);
  right:clamp(3.4rem,6vw,5rem);
  bottom:clamp(1.2rem,3vw,2.1rem);
  z-index:2;
  color:var(--paper);
  text-shadow:0 1px 2px rgba(0,0,0,.6),0 2px 20px rgba(0,0,0,.5);
}
.sv-cap-line{
  display:block;
  font-family:var(--serif);
  font-size:clamp(1.05rem,2.5vw,1.65rem);
  line-height:1.6;
  letter-spacing:.05em;
}
.sv-cap-meta{
  display:flex;
  align-items:center;
  gap:.7em;
  margin-top:.7rem;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.13em;
  color:rgba(241,237,228,.8);
}
.sv-cap-meta a{
  color:var(--gold-soft);
  text-decoration:none;
  padding-bottom:.15em;
  border-bottom:1px solid rgba(216,195,160,.42);
}
.sv-cap-meta a:hover{color:var(--paper);border-color:var(--paper)}
.sv-cap-dot{
  width:3px;
  height:3px;
  border-radius:50%;
  background:rgba(241,237,228,.45);
  flex:none;
}

.sv-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(241,237,228,.34);
  background:rgba(9,10,8,.32);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:var(--paper);
  cursor:pointer;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.sv-btn:hover,.sv-btn:focus-visible{
  background:rgba(9,10,8,.66);
  border-color:rgba(216,195,160,.72);
}
.sv-btn svg{width:17px;height:17px}
.sv-prev{left:clamp(.7rem,1.6vw,1.2rem)}
.sv-next{right:clamp(.7rem,1.6vw,1.2rem)}

.sv-progress{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:3;
  height:2px;
  background:rgba(241,237,228,.14);
}
.sv-progress-fill{
  display:block;
  height:100%;
  width:0;
  background:var(--gold);
}

.sv-foot{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1.2rem;
  margin-top:.85rem;
}
.sv-dots{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:0 .1rem;
  list-style:none;
  margin:0;
  padding:0;
  flex:1;
  min-width:0;
}
.sv-dot{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:.42em;
  min-width:0;
  width:100%;
  padding:.45rem .55rem;
  background:none;
  border:0;
  border-bottom:1px solid transparent;
  color:rgba(241,237,228,.46);
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.1em;
  cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.sv-dot:hover{color:rgba(241,237,228,.85)}
.sv-dot.is-active{color:var(--gold-soft);border-bottom-color:var(--gold)}
.sv-dot-no{font-family:var(--serif);font-size:12px;letter-spacing:.08em;flex:none}
.sv-dot-name{display:none}
.sv-counter{
  margin:.55rem 0 0;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.14em;
  color:rgba(241,237,228,.5);
  white-space:nowrap;
}
.sv-counter span:first-child{font-family:var(--serif);font-size:13px;color:var(--gold-soft)}
.sv-slash{margin:0 .3em;opacity:.6}

.sp-why{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.2rem,3vw,2.6rem);
  margin:clamp(2.4rem,6vh,3.8rem) 0 0;
  padding:0;
}
.sp-why li{padding-top:1rem;border-top:1px solid var(--line-light)}
.sp-why h3{
  margin:0;
  font-family:var(--serif);
  font-size:1.1rem;
  letter-spacing:.16em;
  color:var(--paper);
}
.sp-why p{
  margin:.55rem 0 0;
  font-size:13px;
  line-height:1.95;
  color:rgba(241,237,228,.6);
}

/* ---------- 山行記（文章で読む7本の目次） ---------- */

.sp-reading{
  padding:clamp(2.6rem,7vh,4.4rem) 0 clamp(3.2rem,8vh,5rem);
  background:var(--paper);
  border-top:1px solid var(--line);
}
.sp-reading-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,25rem);
  gap:clamp(1rem,3vw,2.4rem);
  align-items:end;
  margin:clamp(1.2rem,3vh,1.8rem) 0 clamp(1.4rem,3.5vh,2.2rem);
}
.sp-reading-head h2{
  font-size:clamp(1.45rem,3.4vw,2.2rem);
  line-height:1.52;
}
.sp-reading-head p{
  margin:0;
  font-size:13px;
  line-height:2;
  letter-spacing:.04em;
  color:var(--ink-soft);
}
.sp-reading-list{list-style:none;margin:0;padding:0}
.sp-reading-list li{border-top:1px solid var(--line)}
.sp-reading-list li:last-child{border-bottom:1px solid var(--line)}
.sp-reading-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);
}
.sp-reading-list a:hover,
.sp-reading-list a:focus-visible{background:rgba(189,154,104,.12);padding-left:.6rem}
.sp-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;
}
.sp-r-main{display:grid;gap:.3rem}
.sp-r-name{
  font-family:var(--serif);
  font-size:clamp(1.05rem,2vw,1.28rem);
  letter-spacing:.04em;
  line-height:1.4;
}
.sp-r-sub{
  font-size:12px;
  line-height:1.8;
  letter-spacing:.02em;
  color:var(--ink-soft);
}
.sp-r-kind{
  justify-self:start;
  font-family:var(--sans);
  font-size:9.5px;
  letter-spacing:.12em;
  color:var(--ink-soft);
  border:1px solid var(--line);
  border-radius:999px;
  padding:.28rem .6rem;
  white-space:nowrap;
}
.sp-r-arrow{color:var(--gold-ink);font-size:14px;line-height:1}

@media (prefers-reduced-motion:reduce){
  .sv-slide{transition:none}
  .sv-slide img{transition:none}
  .sv-slide.is-active img{transform:none}
}

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

.sp-closing .closing-veil{
  z-index:1;
  background:
    linear-gradient(180deg,rgba(6,7,5,.66) 0%,rgba(6,7,5,.48) 42%,rgba(6,7,5,.92) 100%),
    radial-gradient(70% 60% at 34% 62%,rgba(6,7,5,.42),rgba(6,7,5,0) 72%);
}
.sp-closing .closing-inner{position:relative;z-index:2}
.sp-closing .closing-inner h2{
  text-shadow:0 1px 2px rgba(0,0,0,.7),0 2px 26px rgba(0,0,0,.6);
}
.sp-closing .closing-inner > p{
  text-shadow:0 1px 2px rgba(0,0,0,.65);
  color:rgba(241,237,228,.82);
}
.sp-close-links{margin:clamp(1.6rem,4vh,2.4rem) 0 0}
.sp-close-links a{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--gold-soft);
  text-decoration:none;
  border-bottom:1px solid rgba(216,195,160,.45);
  padding-bottom:.35rem;
}
.sp-close-links a:hover{color:var(--paper);border-color:var(--paper)}

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

@media (max-width:900px){
  .sp-area-grid,.sp-intro-grid{grid-template-columns:1fr}
  .sp-area-head,.sp-area-figure{grid-column:1}
  .sp-area-figure{order:-1}
  .sp-views-head{grid-template-columns:1fr;align-items:start}
  .sp-why{grid-template-columns:1fr;gap:0}
  .sp-why li{padding:1rem 0}
  .sp-why li:first-child{padding-top:1rem}
  .sp-area-peaks{max-width:none}
  .sp-asc{
    grid-template-columns:5.4rem minmax(0,1fr) 1.2rem;
    grid-template-areas:
      "date title go"
      "date nums go";
    row-gap:.25rem;
  }
  .sp-asc-date{grid-area:date}
  .sp-asc-title{grid-area:title}
  .sp-asc-nums{grid-area:nums;justify-content:flex-start}
  .sp-asc-go{grid-area:go;align-self:center}
}

@media (max-width:700px){
  .sp-index{grid-template-columns:1fr}
  .sp-area-peaks{grid-template-columns:1fr}
  .sp-area-peaks:has(> :only-child){max-width:none}
  .sp-hero{min-height:min(88svh,720px)}
  .sp-quote{padding-left:1.1rem}
  .sv-frame{aspect-ratio:4/3}
  .sv-dot{padding:.45rem .1rem}
  .sv-counter{display:none}
  .sv-btn{width:40px;height:40px}
  .sv-btn svg{width:15px;height:15px}
  .sv-cap{right:clamp(1rem,3vw,2.4rem)}
  .sv-cap-meta{flex-wrap:wrap;gap:.5em .6em}
  .sp-reading-head{grid-template-columns:1fr;gap:.9rem;align-items:start}
  .sp-reading-list a{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "date kind"
      "main main";
    gap:.5rem .8rem;
    padding:.95rem .2rem;
  }
  .sp-r-date{grid-area:date}
  .sp-r-main{grid-area:main}
  .sp-r-kind{grid-area:kind;justify-self:end;align-self:center}
  .sp-r-arrow{display:none}
}

@media (max-width:420px){
  .sp-asc{
    grid-template-columns:1fr 1.2rem;
    grid-template-areas:
      "date go"
      "title go"
      "nums go";
  }
  .sp-hero .hero-title{letter-spacing:.03em}
}