/* 作り手の紹介（views/seller/profile-show.ejs・views/garden-members/show.ejs）。写真から始まり、章立てで読む */

/* 章の番号（壱・弐・参） */
/* 章の番号は共通（page.css）。この画面では小さく苔色に */
.chno { display: flex; align-items: center; gap: 14px; font-size: var(--fs-xs); letter-spacing: .3em; color: var(--ink-2); }
.chno b { font-family: var(--f-min); font-weight: 600; font-size: var(--fs-lg); letter-spacing: 0; color: var(--moss); }
.chno i { width: 32px; height: 1px; background: currentColor; opacity: .5; }

/* 写真の扉（暗い写真の上に名前） */
.sp-hero { position: relative; min-height: min(68svh, 640px); display: flex; align-items: flex-end; overflow: hidden; background: var(--night); color: var(--on-dark); }
.sp-hero__ph { position: absolute; inset: 0; }
.sp-hero__ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.05); animation: sp-zoom 9s var(--ease) both; }
.sp-hero__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 16, 14, .62) 0%, rgba(13, 16, 14, .3) 24%, rgba(13, 16, 14, .08) 46%, rgba(13, 16, 14, .8) 100%); }
@keyframes sp-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
.sp-hero__in { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; padding-top: calc(var(--hd) + 20px); padding-bottom: clamp(32px, 4vw, 56px); }
.sp-hero__in > nav { margin-bottom: auto; padding-bottom: var(--s-6); }
.sp-hero .crumb { color: var(--on-dark); margin: 0; opacity: .86; }
.sp-hero .crumb a:hover { color: var(--on-dark); }
.sp-hero__lb { display: flex; align-items: center; gap: 14px; font-size: var(--fs-xs); letter-spacing: .32em; color: var(--on-dark-2); }
.sp-hero__lb::before { content: ""; width: 32px; height: 1px; background: currentColor; }
.sp-hero__nm { margin-top: var(--s-3); font-size: clamp(32px, 3.6vw, 52px); letter-spacing: .12em; line-height: 1.3; word-break: auto-phrase; }
.sp-hero__nm small { margin-left: .2em; font-size: .42em; letter-spacing: .2em; }
.sp-hero__hl { margin-top: var(--s-4); max-width: 30em; font-family: var(--f-min); font-size: var(--fs-lg); line-height: 1.9; letter-spacing: .1em; color: var(--on-dark); }
/* 写真の上から、この畑の商品へ飛ぶ */
.sp-hero__go { margin-top: var(--s-5); }
.sp-hero--plain { min-height: 0; background: transparent; color: var(--ink); }
.sp-hero--plain .crumb { color: var(--ink-2); }
.sp-hero--plain .crumb a:hover { color: var(--ink); }
.sp-hero--plain .sp-hero__lb { color: var(--ink-2); }
.sp-hero--plain .sp-hero__hl { color: var(--ink); }
.sp-hero--plain .sp-hero__in { padding-bottom: 0; }

/* 章 */
.sp-ch { padding-top: clamp(48px, 5vw, 80px); }
.sp-about { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.sp-sum { max-width: 26em; font-family: var(--f-min); font-weight: 500; font-size: var(--fs-xl); line-height: 1.9; letter-spacing: .08em; word-break: auto-phrase; line-break: strict; }
.sp-tags { border-top: 1px solid var(--rule); padding-top: var(--s-4); }
.sp-tags__lb { font-size: var(--fs-xs); letter-spacing: .2em; color: var(--ink-2); }
.sp-tags ul { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: var(--s-3); }
.sp-tags li { font-family: var(--f-min); font-size: var(--fs-lg); letter-spacing: .1em; color: var(--moss); }
@media (min-width: 1000px) {
  .sp-about { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .sp-about .chno { grid-column: 1 / span 3; padding-top: 14px; }
  .sp-about .sp-sum, .sp-about .gm-intro { grid-column: 4 / span 8; }
  .sp-about .sp-tags { grid-column: 4 / span 6; }
}

.sp-story { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.sp-story__hd h2, .sp-items__hd h2 { margin-top: var(--s-4); font-size: var(--fs-2xl); letter-spacing: .1em; line-height: 1.6; word-break: auto-phrase; }
.sp-story__hd h2 { font-size: var(--fs-xl); }
.sp-story__body { max-width: 680px; }
@media (min-width: 1000px) {
  .sp-story { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .sp-story__hd { grid-column: 1 / span 3; position: sticky; top: calc(var(--hd) + 40px); align-self: start; }
  .sp-story__body { grid-column: 4 / span 7; padding-top: 6px; }
}

.sp-items { padding-bottom: var(--s-4); }
.sp-items__hd { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4) var(--s-6); margin-bottom: clamp(20px, 2.4vw, 32px); padding-bottom: var(--s-4); border-bottom: 1px solid var(--ink); }
.sp-none { padding: var(--s-6) 0; color: var(--ink-2); }
.sp-end { padding-top: clamp(40px, 4vw, 64px); padding-bottom: clamp(56px, 6vw, 96px); }
/* 商品の並び: PC は列を増やして小さめに（売り場と同じ考え方） */
@media (min-width: 900px) { .sp-grid { row-gap: 40px; column-gap: clamp(16px, 1.6vw, 24px); } }
@media (min-width: 1100px) { .sp-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* 「この畑の野菜を見る」で飛んだとき、節の上の余白の分だけ詰めて、見出しをヘッダーのすぐ下に出す */
.sp-items { scroll-margin-top: calc(var(--hd) - clamp(48px, 5vw, 80px) + 8px); }
.sp-items__hd h2 { font-size: clamp(22px, 2.2vw, 30px); }

/* 市民農園メンバー（写真の代わりに丸い顔） */
.gm-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: center; }
.gm-face { width: clamp(112px, 13vw, 180px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--mist); display: grid; place-items: center; color: var(--ink-3); box-shadow: 0 0 0 1px var(--rule), 0 0 0 10px var(--paper), 0 0 0 11px var(--rule); }
.gm-face img { width: 100%; height: 100%; object-fit: cover; }
.gm-face .ic { width: 40%; height: 40%; stroke-width: 1; }
.gm-hero .sp-hero__lb { color: var(--ink-2); }
.gm-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: var(--s-5); font-size: var(--fs-sm); letter-spacing: .1em; color: var(--ink-2); }
.gm-meta span { display: inline-flex; align-items: center; gap: 8px; }
.gm-meta .ic { width: 16px; height: 16px; }
.gm-meta b { font-family: var(--f-min); font-size: var(--fs-lg); font-weight: 600; color: var(--ink); }
.gm-intro { max-width: 34em; font-size: var(--fs-lg); line-height: 2.2; white-space: pre-line; word-break: auto-phrase; }
@media (min-width: 900px) {
  .gm-hero { grid-template-columns: auto minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); }
}
.gm .sp-end { padding-bottom: 0; }
.gm-hero { margin-top: var(--s-5); }
.sp-hero--plain .sp-hero__in { padding-top: calc(var(--hd) + clamp(20px, 2.6vw, 40px)); }
.gm .sp-hero__nm { font-size: clamp(28px, 3vw, 40px); }