/* ============================================================
   About page — supplemental styles
   loaded after styles.css
   ============================================================ */

/* Header is always opaque on subpages */
.page-about .site-header.is-static{
  background:rgba(255,255,255,.96);
  color:var(--ink);
  border-bottom-color:var(--line-soft);
  backdrop-filter:saturate(1.1) blur(6px);
}
.page-about .site-header.is-static .brand-mark-light{ opacity:0; }
.page-about .site-header.is-static .brand-mark-dark{ opacity:1; }

/* current nav item underline */
.site-nav a.is-current::after{
  content:""; position:absolute; left:0; bottom:-2px;
  width:100%; height:1px; background:currentColor;
}

/* ============================================================
   PAGE HERO
   ============================================================ */
.page-hero{
  position:relative;
  padding:160px var(--pad-x) 0;
  background:var(--white);
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
}
.page-hero-inner{
  position:relative; z-index:2;
  max-width:var(--max);
  margin:0 auto;
  padding:60px 0 80px;
  max-width:1100px;
}
.page-hero-crumbs{
  display:flex; align-items:center; gap:10px;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--ink-60);
  margin-bottom:48px;
}
.page-hero-crumbs a{ transition:color .2s ease; }
.page-hero-crumbs a:hover{ color:var(--teal); }
.page-hero-crumbs span:not(:nth-child(2)){ color:var(--ink); }

.page-hero-label{
  display:flex; align-items:baseline; gap:18px;
  margin-bottom:32px;
}
.phl-num{
  font-family:var(--en);
  font-size:12px;
  letter-spacing:.24em;
  color:var(--teal);
}
.phl-jp{
  font-family:var(--serif);
  font-size:22px;
  font-weight:500;
  letter-spacing:.16em;
  color:var(--teal);
  padding-bottom:6px;
  border-bottom:1px solid var(--teal);
}

.page-hero-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(40px, 6vw, 84px);
  line-height:1.4;
  letter-spacing:.04em;
  color:var(--ink);
}
.page-hero-sub{
  margin-top:36px;
  font-family:var(--sans);
  font-size:15px;
  line-height:2;
  letter-spacing:.08em;
  color:var(--ink-60);
  max-width:48ch;
}

.page-hero-photo{
  position:relative;
  height:clamp(280px, 38vw, 480px);
  margin:0 calc(var(--pad-x) * -1);
  overflow:hidden;
}
.page-hero-photo img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* ============================================================
   ABOUT SECTIONS
   ============================================================ */
.about-section{
  padding:140px var(--pad-x);
  background:var(--white);
}
.about-section.ivory{ background:var(--ivory); }

.about-grid{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:80px;
  max-width:var(--max);
  margin:0 auto;
}
.about-aside{
  position:sticky; top:120px;
  align-self:start;
}
.about-body{ max-width:820px; }

.about-label{
  display:flex; flex-direction:column; gap:12px;
}
.al-num{
  font-family:var(--en);
  font-size:12px;
  letter-spacing:.24em;
  color:var(--teal);
  padding-bottom:6px;
  border-bottom:1px solid var(--teal);
  display:inline-block;
  align-self:flex-start;
}
.al-jp{
  font-family:var(--serif);
  font-size:18px;
  font-weight:500;
  letter-spacing:.18em;
  color:var(--teal);
}

.about-h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(28px, 3.4vw, 44px);
  line-height:1.55;
  letter-spacing:.06em;
  color:var(--ink);
  margin-bottom:48px;
}

/* ============================================================
   MESSAGE
   ============================================================ */
.message-quote{
  display:flex; flex-direction:column; gap:24px;
  font-size:16px;
  line-height:2.05;
  color:#2a3030;
  letter-spacing:.04em;
  padding-left:32px;
  border-left:1px solid var(--teal);
  max-width:62ch;
}
.message-sign{
  margin-top:48px;
  padding-top:24px;
  border-top:1px solid var(--line);
  display:flex; align-items:baseline; gap:24px;
}
.ms-role{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.18em;
  color:var(--ink-60);
}
.ms-name{
  font-family:var(--serif);
  font-size:22px;
  font-weight:500;
  letter-spacing:.16em;
}
.ms-en{
  margin-left:14px;
  font-family:var(--en);
  font-style:italic;
  font-weight:300;
  font-size:14px;
  letter-spacing:.04em;
  color:var(--ink-60);
}

/* ============================================================
   MVV
   ============================================================ */
.mvv-head{
  max-width:var(--max);
  margin:0 auto 64px;
  display:flex; flex-direction:column; gap:32px;
}
.mvv-head .about-label{ flex-direction:row; align-items:baseline; gap:18px; }

.mvv-grid{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
  border-top:1px solid var(--line);
}
.mvv-card{
  padding:40px 32px 48px 0;
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:24px;
}
.mvv-card:last-child{ border-right:0; padding-right:0; }
.mvv-card-key{
  display:flex; align-items:baseline; gap:14px;
}
.mck-en{
  font-family:var(--en);
  font-style:italic;
  font-size:13px;
  letter-spacing:.04em;
  color:var(--ink-60);
}
.mck-jp{
  font-family:var(--serif);
  font-size:13px;
  font-weight:500;
  letter-spacing:.24em;
  color:var(--teal);
}
.mvv-card-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:22px;
  line-height:1.65;
  letter-spacing:.06em;
}
.mvv-card-body{
  font-size:14px;
  line-height:2;
  color:#2a3030;
  letter-spacing:.04em;
}

/* ============================================================
   INFO TABLE
   ============================================================ */
.info-table{
  display:flex; flex-direction:column;
  border-top:1px solid var(--line);
}
.info-row{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:32px;
  padding:24px 0;
  border-bottom:1px solid var(--line);
  align-items:start;
}
.info-row dt{
  font-family:var(--sans);
  font-size:13px;
  font-weight:500;
  letter-spacing:.18em;
  color:var(--teal);
}
.info-row dd{
  font-family:var(--sans);
  font-size:15px;
  line-height:1.9;
  letter-spacing:.04em;
  color:var(--ink);
}
.info-en{
  font-family:var(--en);
  font-style:italic;
  font-size:13px;
  color:var(--ink-60);
  margin-left:6px;
  letter-spacing:.04em;
}
.info-list{
  display:flex; flex-direction:column; gap:8px;
}
.info-list li{
  position:relative;
  padding-left:18px;
}
.info-list li::before{
  content:"";
  position:absolute; left:0; top:.85em;
  width:8px; height:1px;
  background:var(--teal);
}

/* ============================================================
   HISTORY
   ============================================================ */
.history-list{
  display:flex; flex-direction:column;
  border-top:1px solid var(--line);
}
.history-item{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:48px;
  padding:36px 0;
  border-bottom:1px solid var(--line);
  align-items:baseline;
}
.hi-year{
  font-family:var(--en);
  font-size:32px;
  font-weight:400;
  letter-spacing:-.01em;
  color:var(--teal);
  line-height:1;
}
.hi-month{
  display:block;
  font-size:12px;
  letter-spacing:.18em;
  color:var(--ink-60);
  margin-top:8px;
}
.hi-body{ display:flex; flex-direction:column; gap:10px; }
.hi-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:18px;
  letter-spacing:.06em;
  line-height:1.6;
}
.hi-body p{
  font-size:14px;
  line-height:1.95;
  letter-spacing:.04em;
  color:#2a3030;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 880px){
  .about-section{ padding:96px var(--pad-x); }
  .about-grid{ grid-template-columns:1fr; gap:32px; }
  .about-aside{ position:static; }
  .mvv-grid{ grid-template-columns:1fr; }
  .mvv-card{ border-right:0; border-bottom:1px solid var(--line); padding:32px 0; }
  .mvv-card:last-child{ border-bottom:0; }
  .info-row{ grid-template-columns:1fr; gap:10px; }
  .history-item{ grid-template-columns:1fr; gap:16px; }
  .page-hero{ padding-top:120px; }
  .page-hero-inner{ padding-bottom:48px; }
}