/* 記事以外のページの見出し。横長の写真の下端に白いカードを重ね、題・副題・日付を置く。
   片側だけに色線を引く装飾は使わない（本人指摘）。罫線は上下の細い黒線だけにする。 */
.page-masthead {
  position: relative;
  margin: 6px 0 34px;
}

.page-masthead .pm-art {
  margin: 0;
  height: clamp(200px, 30vw, 320px);
  overflow: hidden;
  background: var(--line, #d7dee6);
}

.page-masthead .pm-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-masthead .pm-card {
  position: relative;
  padding: 22px 0 18px;
  border-top: 1px solid var(--ink, #06131f);
  border-bottom: 1px solid var(--line, #d7dee6);
  background: var(--paper, #fff);
}

.page-masthead.has-art .pm-card {
  margin: -96px 32px 0;
  padding: 26px 30px 22px;
  border: 0;
  box-shadow: 0 18px 44px rgba(6, 19, 31, 0.16);
}

.page-masthead .section-label {
  margin: 0 0 12px;
  color: var(--muted, #52606d);
  letter-spacing: 0.16em;
}

.page-masthead h1 { margin: 0; }

.page-masthead .title-main {
  display: block;
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 880;
  line-height: 1.28;
  letter-spacing: 0.005em;
}

.page-masthead .title-sub {
  display: block;
  margin-top: 10px;
  color: var(--muted, #52606d);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.02em;
}

.page-masthead .page-meta,
.page-masthead .established {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line, #d7dee6);
}

html[data-color-mode="dark"] .page-masthead.has-art .pm-card {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}

html[data-color-mode="dark"] .page-masthead .pm-art img { filter: brightness(0.85); }

@media (max-width: 640px) {
  .page-masthead.has-art .pm-card {
    margin: -56px 12px 0;
    padding: 18px 18px 16px;
  }
}

.page-masthead .pm-credit {
  margin: 10px 32px 0;
  color: var(--muted, #52606d);
  font-size: 11.5px;
  line-height: 1.6;
}