/* 下層ページ固有の編集。共通の色・書体・CTAは style.css を継承する。 */
.site-header { position: relative; top: auto; color: var(--ink); background: var(--paper); }
.site-header .site-nav .shop-link { border-color: var(--ink); }
.breadcrumb { width: var(--page); margin: 0 auto; padding: 20px 0 0; font-size: 11px; color: var(--muted); }
.breadcrumb a { text-underline-offset: 3px; }
.page-intro { width: var(--page); padding: clamp(44px, 7vw, 100px) 0 clamp(62px, 9vw, 130px); margin: 0 auto; }
.page-intro h1 { max-width: 900px; font-size: clamp(48px, 5vw, 72px); }
.page-intro p { max-width: 690px; margin: 22px 0 0; color: var(--muted); font-size: clamp(15px, 1.5vw, 18px); }
.page-intro .about-title { max-width: 1200px; }
.page-intro .about-title .phrase { white-space: nowrap; }
.phrase { display: inline-block; max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.keep { display: inline-block; white-space: nowrap; }
.page-photo { width: 92vw; height: min(59vw, 790px); min-height: 400px; margin: 0 auto; overflow: hidden; background: #d7d3c7; }
.page-photo img { object-position: center; }
.page-photo.people-safe { height: auto; min-height: 0; aspect-ratio: 5 / 3; }
.story { padding: clamp(82px, 12vw, 180px) 0; }
.reading { width: min(100% - 48px, 780px); margin: 0 auto; }
.reading h2 { font-size: clamp(31px, 4.1vw, 58px); }
.reading p { margin: 24px 0 0; color: var(--muted); }
.reading p, .page-intro p { line-break: strict; text-wrap: pretty; }
.site-nav [aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.facts { display: grid; grid-template-columns: 8em 1fr; gap: 10px 20px; margin: 34px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
.facts dt { color: var(--muted); font-size: 12px; }
.facts dd { margin: 0; }
.wide-photo { width: min(88vw, 1320px); height: min(56vw, 720px); min-height: 360px; margin: 0 auto; overflow: hidden; background: #d7d3c7; }
.wide-photo.portrait { width: min(76vw, 980px); height: min(82vw, 950px); }
.wide-photo.portrait img { object-position: center 38%; }
.wide-photo.square { width: min(80vw, 800px); height: auto; min-height: 0; aspect-ratio: 1; }
.wide-photo.portrait { width: min(70vw, 720px); height: auto; min-height: 0; aspect-ratio: 3 / 4; }
.short-story { padding-top: clamp(48px, 7vw, 100px); }
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; width: min(92vw, 1380px); margin: 0 auto; }
.photo-pair figure { height: min(35vw, 520px); margin: 0; overflow: hidden; }
.shop-end .quiet-link { margin-top: 18px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-nav a { min-height: 44px; }
@media (max-width: 767px) {
  .site-header { min-height: 128px; }
  .site-header .header-inner { min-height: 128px; }
  .site-header .site-nav { max-width: none; }
  .site-header .site-nav a { min-height: 44px; }
  .page-intro { padding-top: 38px; }
  .page-intro h1 { font-size: clamp(36px, 12vw, 42px); }
  .page-intro .about-title { font-size: clamp(32px, 9vw, 42px); }
  .reading h2 { font-size: clamp(25px, 7.2vw, 28px); letter-spacing: .035em; }
  .page-photo { width: 100%; height: 64vw; min-height: 280px; }
  .page-photo.people-safe { width: 100%; }
  .reading { width: var(--page); }
  .story { padding: 82px 0; }
  .wide-photo { width: calc(100% - 20px); height: 65vw; min-height: 280px; }
  .wide-photo.square { width: min(80vw, 800px); height: auto; min-height: 0; }
  .wide-photo.portrait { width: min(70vw, 720px); height: auto; min-height: 0; aspect-ratio: 3 / 4; }
  .photo-pair { grid-template-columns: 1fr; width: calc(100% - 40px); gap: 20px; }
  .photo-pair figure { height: 66vw; }
  .facts { grid-template-columns: 6.5em 1fr; gap: 9px 12px; }
}

@media (max-width: 370px) {
  .reading h2 { font-size: 25px; }
}