/* ============================================================
   philosophy.css — page-philosophy.php page-specific styles

   静的プロトタイプ /philosophy.html の inline <style> から ph-* セレクタ
   を移植。px 値はすべて rem に変換済み (1rem = 16px @ html default)。

   破損していた .menu-btn .lines { height: 8px } の override は除外
   (front.css の同じ問題を fix した経緯あり)。menu-btn の見た目は
   共通 assets/menu-btn.css に任せる。

   依存: tokens.css → base.css → header.css → footer.css → page-cta.css → philosophy.css
   ============================================================ */

html{ scroll-behavior: smooth; }
img{ height: auto; }

body{
  line-height: 1.95;
  letter-spacing: 0.04em;
}

/* ===== Header (page-specific overrides on top of header.css) ===== */
.header{ transition: background-color .5s ease; }
.header.scrolled{
  background: rgba(244,242,237,0.88);
  -webkit-backdrop-filter: blur(0.5rem);
          backdrop-filter: blur(0.5rem);
}
.header .brand{ transition: opacity .5s ease; }

/* ===== Reveal animation ===== */
.reveal{
  opacity: 0; transform: translateY(1.125rem);
  transition: opacity 1.4s cubic-bezier(.2,.6,.2,1), transform 1.4s cubic-bezier(.2,.6,.2,1);
}
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.12s; }
.reveal.d2{ transition-delay:.26s; }
.reveal.d3{ transition-delay:.42s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ===== Hero — quiet, large air ===== */
.ph-hero{
  min-height: 100vh;
  min-height: 100svh;
  padding: 8.125rem 1.625rem 4rem;
  display: grid;
  grid-template-rows: 1fr auto auto;
  position: relative;
}
.ph-hero .chapter{
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--dim-on-light);
  margin: 1.5rem 0 0;
}
.ph-hero .chapter .dot{
  display: inline-block;
  width: 0.25rem; height: 0.25rem;
  background: var(--ink); border-radius: 50%;
  margin: 0 0.625rem 2px 0; vertical-align: middle; opacity:.65;
}
.ph-hero h1{
  margin: 0;
  font-family: var(--jp-s);
  font-weight: 300;
  font-size: clamp(1.625rem, 7.6vw, 2.125rem);
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--ink);
  text-wrap: balance;
}
.ph-hero h1 span{ display: block; }
.ph-hero .en{
  margin: 2.25rem 0 0;
  font-family: var(--en);
  font-weight: 300;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  line-height: 1.9;
  color: var(--dim-on-light);
}
.ph-hero .scroll-cue{
  align-self: end; justify-self: start;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.875rem;
  font-family: var(--mono);
  font-size: 0.59375rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--dim-on-light);
}
.ph-hero .scroll-cue .tick{
  width: 1px; height: 2.75rem;
  background: var(--ink); opacity:.55;
  animation: ph-cue 2.6s ease-in-out infinite;
}
@keyframes ph-cue{
  0%{ transform: translateY(0); opacity:.55; }
  50%{ opacity:.85; }
  100%{ transform: translateY(0.5rem); opacity:.15; }
}

/* ===== Lede — quiet opening (between hero and first section) ===== */
.ph-lede{
  padding: 6.875rem 1.625rem 8.125rem;
}
.ph-lede p{
  margin: 0 0 1.5em;
  font-family: var(--jp-s);
  font-weight: 300;
  font-size: clamp(1rem, 4.4vw, 1.125rem);
  line-height: 2.4;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-wrap: pretty;
}
.ph-lede p:last-of-type{ margin-bottom: 0; }

/* ===== Section (heading + body, optional figure) ===== */
.ph-sec{
  padding: 0 1.625rem;
  margin: 0 0 8.125rem;
}
.ph-sec:last-of-type{ margin-bottom: 3.75rem; }

.ph-sec .num{
  font-family: var(--mono);
  font-size: 0.625rem; letter-spacing: 0.4em;
  color: var(--dim-on-light);
  margin: 0 0 1.625rem;
}
.ph-sec h2{
  margin: 0 0 2.5rem;
  font-family: var(--jp-s);
  font-weight: 300;
  font-size: clamp(1.375rem, 5.8vw, 1.625rem);
  letter-spacing: 0.08em;
  line-height: 1.7;
  color: var(--ink);
  text-wrap: balance;
}
.ph-sec p{
  margin: 0 0 1.6em;
  font-family: var(--jp);
  font-weight: 300;
  font-size: 0.90625rem;
  line-height: 2.25;
  letter-spacing: 0.06em;
  text-wrap: pretty;
}
.ph-sec p:last-of-type{ margin-bottom: 0; }

.ph-sec figure{
  margin: 3.5rem -1.625rem 3.5rem;
}
.ph-sec figure img{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--paper-soft);
  filter: grayscale(.18) contrast(1.02);
}

/* divider between sections — barely there */
.ph-divider{
  display: block;
  width: 1.75rem; height: 1px;
  background: var(--ink); opacity:.22;
  margin: 0 1.625rem 6.25rem;
}

/* ===== Close — quiet ===== */
.ph-close{
  padding: 3.75rem 1.625rem 8.75rem;
}
.ph-close .mark{
  display:block; width:1.75rem; height:1px; background: var(--ink);
  opacity:.5; margin: 0 0 3.5rem;
}
.ph-close p{
  margin: 0 0 1.4em;
  font-family: var(--jp-s);
  font-weight: 300;
  font-size: clamp(1rem, 4.4vw, 1.125rem);
  line-height: 2.4;
  letter-spacing: 0.1em;
}
.ph-close .signature{
  margin-top: 4rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--dim-on-light);
}

/* ============================================================
   PC (>=768px) — match index.html header/footer rhythm
   ============================================================ */
@media (min-width: 48rem){
  :root{
    --ph-max: 73.75rem;
    --ph-gutter: clamp(2.5rem, 6vw, 6rem);
  }

  /* Header: backdrop-filter / mix-blend-mode を明示リセット (philosophy固有) */
  .header{
    backdrop-filter: none; -webkit-backdrop-filter: none;
    mix-blend-mode: normal;
    z-index: 5;
    transition: none;
  }

  /* Hero */
  .ph-hero{
    max-width: var(--ph-max);
    margin: 0 auto;
    padding: 12.5rem var(--ph-gutter) 6.25rem;
  }
  .ph-hero h1{
    font-size: clamp(2.5rem, 4.6vw, 3.625rem);
    letter-spacing: 0.05em;
    line-height: 1.5;
    max-width: 22ch;
  }
  .ph-hero .en{ font-size: 0.875rem; margin-top: 3.5rem; }

  /* Lede */
  .ph-lede{
    padding: 12.5rem var(--ph-gutter) 13.75rem;
    max-width: 55rem;
    margin: 0 auto;
  }
  .ph-lede p{
    font-size: 1.3125rem;
    line-height: 2.3;
    letter-spacing: 0.1em;
  }

  /* Sections — two-column with alternating image side */
  .ph-sec{
    max-width: var(--ph-max);
    margin: 0 auto 12.5rem;
    padding: 0 var(--ph-gutter);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(3rem, 7vw, 7.5rem);
    align-items: start;
  }
  .ph-sec .text{ max-width: 33.75rem; padding-top: 1.5rem; }
  .ph-sec .num{ margin-bottom: 2.25rem; }
  .ph-sec h2{
    font-size: clamp(1.625rem, 2.6vw, 2.125rem);
    letter-spacing: 0.06em;
    line-height: 1.6;
    margin-bottom: 3rem;
  }
  .ph-sec p{ font-size: 0.9375rem; line-height: 2.3; }
  .ph-sec figure{ margin: 0; }
  .ph-sec figure img{ aspect-ratio: 4 / 5; }

  .ph-sec.flip > .text{ order: 2; }
  .ph-sec.flip > figure{ order: 1; }

  .ph-sec.no-image{
    display: block;
    max-width: 51.25rem;
  }

  .ph-divider{ margin: 0 auto 10rem; }

  /* Close */
  .ph-close{
    padding: 3.75rem var(--ph-gutter) 15rem;
    max-width: 51.25rem;
    margin: 0 auto;
  }
  .ph-close p{ font-size: 1.3125rem; line-height: 2.3; }
}

@media (min-width: 87.5rem){
  .ph-sec{ gap: 8.75rem; }
}