/* 天体写真（/astrophotography/）だけの部品: 代表作の目次・図版・StarryPocket への帯。共通の部品は ../style.css */

.pl-note, .sp-text p { word-break: auto-phrase; }
.page-head--astro { padding-bottom: 0; }

/* ------------------------------------------------------------ 代表作の目次 */
.toc { margin-top: clamp(48px, 6vw, 88px); }
.toc ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); border-top: 1px solid var(--line-d); }
.toc a {
  display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto; align-items: baseline; column-gap: 6px;
  padding: 13px 0; border-bottom: 1px solid var(--line-d); transition: color 0.2s;
}
.toc-no { font-family: var(--f-label); font-weight: 600; font-size: 0.9rem; color: var(--red); }
.toc-t { font-size: 0.86rem; line-height: 1.6; color: var(--tx-d2); }
.toc-y { font-family: var(--f-label); font-weight: 500; font-size: 0.86rem; color: var(--tx-d3); }
.toc a:hover .toc-t { color: var(--tx-d); }

/* ------------------------------------------------------------ 図版 */
.plates { overflow-x: clip; background: var(--dark); color: var(--tx-d); padding: clamp(64px, 8vw, 120px) 0 clamp(80px, 10vw, 160px); }
.plates-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: clamp(72px, 9vw, 150px); align-items: start; }
.plate { min-width: 0; }
.pl-img { display: block; position: relative; overflow: hidden; background: var(--night); }
.pl-img img { width: 100%; height: auto; transition: transform 0.9s var(--ease); }
.pl-img:hover img { transform: scale(1.02); }

.pl-cap {
  display: grid; grid-template-columns: 4.2em minmax(0, 1fr); column-gap: 14px;
  grid-template-areas: "no title" "no meta" "no tech" "no note" "no link";
  padding-top: 18px;
}
.pl-no { grid-area: no; font-family: var(--f-label); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.06em; color: var(--red); line-height: 1.7; }
.pl-no span { margin-left: 4px; font-size: 0.86rem; color: var(--tx-d3); }
.pl-title { grid-area: title; font-weight: 700; font-size: clamp(1.1rem, 1.5vw, 1.35rem); letter-spacing: 0.06em; line-height: 1.55; }
.pl-meta { grid-area: meta; margin-top: 4px; font-family: var(--f-label); font-weight: 500; font-size: 0.98rem; letter-spacing: 0.04em; color: var(--tx-d2); line-height: 1.6; }
.pl-tech .nw { white-space: nowrap; }
.pl-tech .sl { opacity: 0.6; }
.pl-tech { grid-area: tech; margin-top: 6px; font-family: var(--f-label); font-weight: 500; font-size: 0.9rem; letter-spacing: 0.03em; color: var(--tx-d3); line-height: 1.6; }
.pl-note { grid-area: note; margin-top: 12px; max-width: 30em; font-size: 0.9rem; line-height: 1.85; color: var(--tx-d2); }
/* 文と並べる縦長の図版では、撮影データを項目ごとの表にする */
.pl-spec { grid-area: tech; margin-top: 20px; max-width: 30em; border-bottom: 1px solid var(--line-d); }
.pl-spec > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-d); }
.pl-spec dt { font-size: 0.82rem; letter-spacing: 0.12em; color: var(--tx-d3); line-height: 1.8; }
.pl-spec dd { font-family: var(--f-label); font-weight: 500; font-size: 0.98rem; letter-spacing: 0.03em; line-height: 1.6; }
.pl-link {
  grid-area: link; justify-self: start; margin-top: 14px;
  display: inline-flex; gap: 8px; align-items: center;
  font-weight: 500; font-size: 0.86rem; letter-spacing: 0.06em;
  padding-bottom: 3px; border-bottom: 1px solid var(--tx-d3); transition: border-color 0.2s, color 0.2s;
}
.pl-link:hover { border-color: var(--red); }

/* 並べ方: 横長は全幅、縦長は二つ並べるか文と並べる。段をずらして単調にしない */
.plate--wide { grid-column: 1 / -1; }
.plate--wide .pl-cap, .plate--bleed .pl-cap {
  grid-template-columns: 4.2em minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-areas: "no title tech" "no meta note" "no . link";
  column-gap: var(--col-gap);
}
.plate--wide .pl-tech, .plate--bleed .pl-tech { margin-top: 6px; }
.plate--bleed { grid-column: 1 / -1; width: 100vw; margin-left: calc(50% - 50vw); }
.plate--bleed .pl-cap { padding-inline: max(var(--gutter), calc(50vw - var(--maxw) / 2)); }
.plate--pair-a { grid-column: 1 / span 7; }
.plate--pair-b { grid-column: 9 / span 4; margin-top: clamp(0px, 12vw, 200px); }
/* 縦長の2点は段をずらさず、左右1列ずつ空けて並べる（間延びさせない） */
.plate--duo-a { grid-column: 2 / span 5; }
.plate--duo-b { grid-column: 7 / span 5; }
.plate--duo-a .pl-img img, .plate--duo-b .pl-img img { aspect-ratio: 2 / 3; object-fit: cover; } /* 縦横比の差（1%前後）で文の頭がずれないように */
.plate--side { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; }
.plate--side .pl-img { grid-column: 2 / span 5; }
.plate--side .pl-cap { grid-column: 8 / span 5; padding-top: 0; }

/* ------------------------------------------------------------ StarryPocket へ */
.sp-band { background: var(--night); color: var(--tx-d); padding: clamp(64px, 8vw, 120px) 0; border-top: 1px solid var(--line-d); }
.sp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 40px; align-items: center; }
.sp-text { grid-column: 1 / span 5; }
.sp-text h2 { margin-top: 12px; font-weight: 700; font-size: clamp(1.45rem, 2.4vw, 2rem); letter-spacing: 0.08em; line-height: 1.45; }
.sp-text > p:not(.sec-no):not(.sec-links) { margin-top: 18px; max-width: 30em; line-height: 1.95; color: var(--tx-d2); }
.sp-strip { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sp-strip a { display: block; }
.sp-strip img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--dark); transition: opacity 0.3s; }
.sp-strip a:hover img { opacity: 0.75; }
.sp-strip span { display: block; margin-top: 6px; font-size: 0.78rem; line-height: 1.5; color: var(--tx-d3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------ 中くらいの画面 */
@media (max-width: 1080px) {
  .toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-text, .sp-strip { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------ スマホ */
@media (max-width: 760px) {
  .toc ol { grid-template-columns: minmax(0, 1fr); }
  .plates-grid { grid-template-columns: minmax(0, 1fr); row-gap: 64px; }
  .plate--wide, .plate--pair-a, .plate--pair-b, .plate--duo-a, .plate--duo-b, .plate--side, .plate--bleed { grid-column: 1; margin-top: 0; }
  .plate--side { display: block; }
  .plate--side .pl-cap { padding-top: 16px; padding-bottom: 0; }
  .plate--wide .pl-cap, .plate--bleed .pl-cap, .pl-cap {
    grid-template-columns: 3em minmax(0, 1fr);
    grid-template-areas: "no title" "no meta" "no tech" "no note" "no link";
    column-gap: 10px;
  }
  .sp-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .sp-strip span { display: none; }
}