/* Viewport-wide watercolor, selected by section. Hero is unchanged. */
main > .hero, main > .gm-hero { background: #fff !important; }
.watercolor-content {
  position: relative;
  isolation: isolate;
  background: #fff;
  /* Clip the viewport-fixed artwork to this content range, excluding Hero/footer. */
  clip-path: inset(0);
}
.continuous-scape {
  position: fixed;
  inset: 72px 0 0;
  display: block;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.continuous-scape img {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 2 / 1;
  transform: translateY(-50%);
  filter: brightness(.88) contrast(1.316) saturate(1.15);
}
.watercolor-content > section {
  position: relative;
  z-index: 1;
  background: transparent !important;
}
.watercolor-content > section > .shell {
  position: relative;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2) 10%, rgba(255,255,255,.2) 90%, transparent);
}
@media (max-width: 768px) {
  .continuous-scape { inset: 72px 0 calc(64px + env(safe-area-inset-bottom, 0px)); }
  .watercolor-content > section > .gm-container {
    position: relative;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.12) 8%, rgba(255,255,255,.12) 92%, transparent);
  }
}
#insight::before { background: none; }
#insight { color: #262820; --line-on-dark: rgba(29,74,55,.2); }
#insight :is(h2, .insight__lead, .insight__body p, .insight__stats dd,
  .gm-dark-copy p, .gm-stats dd) { color: #262820; }
#insight :is(.insight__photo figcaption, .insight__sign span,
  .insight__stats dd small, .insight__note, .insight__timeline p,
  .gm-insight__photo figcaption, .gm-stats dd small, .gm-note,
  .gm-timeline p, .gm-sign span) { color: #5d6258; }
#insight :is(.head .en, .insight__photo figcaption .en, .insight__stats dt,
  .insight__timeline time, .insight__timeline li.is-now time, .insight__sign,
  .gm-head__en, .gm-stats dt, .gm-timeline time, .gm-timeline li.is-now time,
  .gm-sign) { color: #725c30; }
#insight :is(.head .ghost, .gm-head__ghost) {
  -webkit-text-stroke-color: rgba(29,74,55,.13);
}
#insight :is(.gm-dark-copy, .gm-stats, .gm-stats div) { border-color: rgba(29,74,55,.2); }
#insight .gm-timeline::before { background: rgba(29,74,55,.2); }
#insight :is(.insight__timeline, .gm-timeline) li.is-now::before {
  background: #1d4a37;
  box-shadow: 0 0 0 4px rgba(29,74,55,.12);
}

/* ================================================================
   INSIGHT の代表写真を水彩の紙面に馴染ませる
   もとは墨黒背景向けの調整（brightness .96）だったため、
   明色の紙面では硬い矩形として浮いていた。
   ================================================================ */
#insight :is(.insight__photo, .gm-insight__photo) img {
  /* スタジオの壁を紙の白へ寄せる */
  filter: saturate(.52) contrast(.95) brightness(1.15);
  /* 四辺をそれぞれにじませ、紙に染み込ませる（角だけでなく辺も消す） */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 9%, #000 88%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 9%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* 縁が溶ける分、説明文が離れて見えないよう詰める */
#insight :is(.insight__photo, .gm-insight__photo) figcaption { margin-top: 4px; }

/* ABOUT の切り抜き写真：足元を紙に沈ませ、貼り付けた感を消す。
   法被の青はサイト内で唯一の鮮やかな色なので、彩度は落とさない。 */
#about :is(.about__figure, .gm-about-figure) img {
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, rgba(0, 0, 0, .55) 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, rgba(0, 0, 0, .55) 92%, transparent 100%);
}
#about :is(.about__figure, .gm-about-figure)::after { opacity: .55; }