/* ==========================================================================
   Visual Essays index page (Figma node 9:49 "06_VISUAL ESSYS")
   ========================================================================== */

/* Figma: ink幅 132.0 / 大文字高 10.0 */
.page-label {
  font-size: 14px;
  letter-spacing: 1.7px;
}

/* 先方指示(docs/リンク修正指示0919.pdf p.3。図の見出しは"BOOKS"だが中身はESSAYS):
   ・見出し "One page. One thought." の上端を見開き画像の上端に揃える
     → align-items を center から start へ
   ・見開き画像の下端と 01/02 の区切り線との間をもっと開ける
     → PDF図の実測は約73pxだったが、目視調整でさらに1.5倍の114pxとした */
.essays-hero {
  padding-top: 48px;
  padding-bottom: clamp(60px, 8.25vw, 114px);
  display: grid;
  grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.essays-hero__cover img {
  width: 100%;
  height: auto;
}

.essays-hero__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(36px, 6vw, 80px);
  line-height: 1.25;
  letter-spacing: -0.05em;
  margin-bottom: 20px;
  /* 行送り1.25の余り(half-leading)と、em上端から大文字上端までの隙間ぶん
     文字が下がって見えるので、その分だけ引き上げて画像上端と光学的に揃える。 */
  margin-top: -0.2em;
}

.essays-hero__lead {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.7;
  max-width: 553px;
}

@media (max-width: 800px) {
  .essays-hero {
    grid-template-columns: 1fr;
  }

  .essays-hero__cover {
    max-width: 280px;
  }
}

/* Figma実測(1440px基準): 左625px/gap214px/右477px */
.essays-list {
  display: grid;
  grid-template-columns: 625fr 477fr;
  gap: 0 clamp(24px, 14.9vw, 214px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

.essays-list__col {
  display: flex;
  flex-direction: column;
}

/* カード全体が1つのリンク(<a class="essay-card">)。
   小さな "Explore →" だけが押せる状態だと押しづらいため、ブロックごと押せるようにした。
   中の "Explore →" は入れ子の <a> にできないので <span> にしてある。 */
.essay-card {
  display: block;
  border-top: 1px solid var(--color-border);
  padding-top: 14px;
  padding-bottom: 18px;
}

.essay-card__number {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.25;
  margin-bottom: 0;
}

.essay-card__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.25;
  margin-bottom: 12px;
}

.essay-card__body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.35;
  margin-bottom: 13px;
}

.essay-card__thumb {
  margin-top: 28px;
  margin-bottom: 28px;
}

.essay-card__thumb img {
  width: 100%;
  height: auto;
}

.essay-card__link {
  display: block;
  text-align: right;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: -0.6px;
  color: var(--color-fg-muted);
}

@media (max-width: 800px) {
  .essays-list {
    grid-template-columns: 1fr;
  }
}

.essays-continue {
  padding-bottom: clamp(40px, 6vw, 72px);
  border-top: 1px solid var(--color-border);
  padding-top: 13px;
}

.essays-continue__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 24px;
  margin-bottom: 8px;
}

.essays-continue__body {
  font-family: var(--font-sans);
  font-size: 16px;
  margin-bottom: 46px;
}

.essays-continue__cta {
  display: inline-block;
  border: 1px solid var(--color-border);
  padding: 17px 45px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
}