/* ==========================================================================
   Home page sections
   ========================================================================== */

/* ---- 01 Hero (node 462:662) ----------------------------------------- */
.hero {
  position: relative;
  padding-top: clamp(32px, 10vh, 72px);
  padding-bottom: clamp(56px, 14vh, 120px);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 507px);
  grid-template-areas:
    "body compass"
    "scroll compass";
  column-gap: 24px;
  row-gap: 0;
  align-items: start;
}

.hero__body {
  grid-area: body;
}

.hero__eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(18px, 2vw, 32px);
  letter-spacing: 3.2px;
  color: var(--color-fg-muted);
  margin-bottom: 8px;
}

.hero__headline {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(40px, 6.6vw, 96px);
  line-height: 1.2;
  letter-spacing: -0.06em;
  color: var(--color-fg);
  margin-top: 16px;
  margin-bottom: 32px;
}

.hero__lead {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(17px, 1.6vw, 24px);
  line-height: 1.5;
  color: var(--color-fg);
  max-width: 40em;
}

.hero__compass {
  grid-area: compass;
  align-self: end;
  justify-self: center;
  width: 100%;
  max-width: 507px;
  /* Figmaではコンパス下端がScroll to exploreより上にあるため、その分持ち上げる */
  padding-bottom: clamp(32px, 5vw, 80px);
}

.hero__compass img {
  width: 100%;
  height: auto;
}

.hero__scroll {
  grid-area: scroll;
  margin-top: clamp(40px, 6vw, 80px);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: -0.65px;
  color: var(--color-fg-muted);
  line-height: 1.6;
}

.hero__scroll-arrow {
  display: block;
}

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "body"
      "compass"
      "scroll";
    row-gap: 24px;
  }

  .hero__compass {
    max-width: 320px;
    margin-inline: auto;
    align-self: auto;
    padding-bottom: 0;
  }
}

/* ---- shared section components -------------------------------------- */
/* ---- 02 Updates (node 478:1007) -------------------------------------- */
.updates__label {
  margin-bottom: 20px;
}

.updates__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.updates__list li {
  font-family: var(--font-sans);
  font-size: 15px;
  letter-spacing: -0.75px;
  line-height: 1.6;
}

.updates__date {
  font-weight: 600;
  margin-right: 0.5em;
}

/* ---- 03 About (node 461:506) ------------------------------------------ */
.about__media img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.about__body {
  margin-top: 24px;
}

.about__heading {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.375;
  letter-spacing: -0.05em;
  margin-top: 0;
  margin-bottom: 32px;
}

.about__lead {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 2.25;
  margin-bottom: 24px;
}

@media (min-width: 901px) {
  .about__grid {
    display: grid;
    /* Figma: 写真493.5px / 写真右端733.5px → 本文左端820px = gap 86px */
    grid-template-columns: minmax(0, 493px) minmax(0, 1fr);
    column-gap: clamp(32px, 6vw, 86px);
    align-items: start;
  }

  .about__body {
    margin-top: 0;
  }
}

/* ---- 04 Philosophy (node 483:469) -------------------------------------- */
/* Figma: 見出しブロック(左 384px)と3カラム(右)が横並び。gap 49px */
.philosophy__layout {
  display: grid;
  grid-template-columns: minmax(0, 384px) minmax(0, 1fr);
  column-gap: clamp(32px, 4vw, 49px);
  align-items: start;
}

.philosophy__columns {
  --philosophy-col-gap: clamp(32px, 5vw, 67px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--philosophy-col-gap);
}

.philosophy__column {
  position: relative;
}

/* Figma: カラム間は横罫ではなく縦罫。gapの中央に引く */
.philosophy__column + .philosophy__column::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--philosophy-col-gap) / -2);
  border-left: 1px solid var(--color-border);
}

.philosophy__column-number {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.philosophy__column-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 16px;
}

.philosophy__column-body {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.45;
}

.philosophy__column-figure {
  margin-top: 20px;
  height: 60px;
  display: flex;
  align-items: flex-end;
}

.philosophy__column-figure img {
  max-height: 100%;
  width: auto;
}

/* Figma frame 461:509: 星(image 38, 13x13)が左上、猫(image 37, 50x56)が
   右下寄りに重なって配置される。横並びではない */
.philosophy__column-figure--01 {
  position: relative;
  align-items: normal;
  width: 82px;
  height: 79px;
}

.philosophy__column-figure--01 img {
  position: absolute;
  max-height: none;
  height: auto;
  width: auto;
}

.philosophy__column-figure--01 .philosophy__figure-star {
  top: 0;
  left: 0;
  width: 15.85%;
}

.philosophy__column-figure--01 .philosophy__figure-cat {
  top: 29.11%;
  left: 39.02%;
  width: 60.98%;
}

@media (max-width: 900px) {
  .philosophy__layout {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .philosophy__columns {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  /* 1列に積むので縦罫は横罫に戻す */
  .philosophy__column + .philosophy__column::before {
    top: -20px;
    bottom: auto;
    left: 0;
    right: 0;
    border-left: none;
    border-top: 1px solid var(--color-border);
  }
}

/* ---- 05 Books (node 478:1010) ------------------------------------------ */
.books__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Figma: カード1が240-741、カード2が794-1285 → 間隔53px */
  column-gap: clamp(32px, 4vw, 53px);
  margin-top: clamp(32px, 3vw, 40px);
}

/* Figma: 表紙(220px)とテキストが横並び、縦位置は中央揃え */
.book-card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  column-gap: clamp(20px, 3vw, 36px);
  align-items: center;
}

.book-card__cover {
  display: block;
  width: 220px;
  max-width: 100%;
}

.book-card__cover img {
  width: 100%;
  height: auto;
}

.book-card__eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.3px;
  margin-bottom: 4px;
}

.book-card__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 8px;
}

.book-card__subtitle {
  font-family: var(--font-sans);
  font-size: 14px;
  margin-bottom: 12px;
}

.book-card__body {
  font-family: var(--font-serif-alt);
  font-size: 14px;
  line-height: 1.45;
  margin-bottom: 4px;
}

.book-card__date {
  font-family: var(--font-serif-alt);
  font-size: 14px;
  margin-bottom: 20px;
}

.book-card__cta {
  display: inline-block;
  border: 1px solid var(--color-border);
  padding: 10px 20px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  text-align: center;
}

.book-card__cta[aria-disabled="true"] {
  color: var(--color-fg-faint);
  cursor: default;
}

.book-card__status {
  margin-top: 12px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  text-align: center;
}

@media (max-width: 900px) {
  .books__grid {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }

  /* 狭い画面では表紙を上、テキストを下に積む */
  .book-card {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
}

/* ---- 06 Visual Essays (node 462:630) ------------------------------------ */
/* Figma: 見出しブロック(左 約280px)とサムネ2枚(右)が横並び。
   本文240px始まり、サムネは551pxから1285pxまで */
.essays__layout {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 734px);
  column-gap: clamp(24px, 3vw, 31px);
  align-items: start;
}

.essays__thumbs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

.essays__thumbs img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.essays__thumbs a:nth-child(2) img {
  opacity: 0.9;
}

@media (max-width: 900px) {
  .essays__layout {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .essays__thumbs {
    grid-template-columns: 1fr;
  }
}

/* ---- 07 Compass Circle (node 467:496) ----------------------------------- */
/* Figma: 質問文が1行に収まるよう3列目を広めに取る */
/* 05 COMPASS CIRCLE は本文が短く、すぐ下がフッターの黒地になるため
   上下が詰まって見える。先方指示(docs/リンク修正指示0919.pdf p.3)は
   「04 VISUAL ESSAYS と同じ高さになるよう下に余白を取る」。
   PDF図の実測で約50px不足していたので、その分を下に足す。 */
.section--circle {
  padding-bottom: calc(clamp(40px, 6vw, 76px) + clamp(24px, 3.5vw, 50px));
}

.circle__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 420px);
  gap: 32px;
  align-items: start;
  margin-top: clamp(24px, 4vw, 40px);
}

.circle__intro-body {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 22px;
}

.circle__question-meta {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 24px;
}

.circle__question-text {
  font-family: var(--font-typewriter);
  font-size: 20px;
  line-height: 1.4;
  margin-bottom: 44px;
}

@media (max-width: 900px) {
  .circle__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}