/* =============================================
   ABOUT page — reuses origin/about/journey styles from index.css
   This sheet adds only the page-header and "coming soon" placeholders.
   ============================================= */

.page-header {
  background: var(--navy-deep);
  color: white;
  padding: 140px clamp(24px, 6vw, 80px) clamp(60px, 8vw, 100px);
  text-align: center;
  border-bottom: 1px solid var(--line-dark);
}
.page-header .label {
  font-family: var(--font-display-en);
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
  font-weight: 600;
}
.page-header h1 {
  font-family: var(--font-display-jp);
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 700;
  line-height: 1.3;
  color: white;
  letter-spacing: 0.05em;
}
html[lang="en"] .page-header h1 {
  font-family: var(--font-display-en);
  font-style: italic;
  font-weight: 500;
}

/* Coming-soon placeholder block inside About */
.placeholder-block {
  background: var(--bg-subtle);
  padding: clamp(60px, 9vw, 110px) clamp(24px, 6vw, 80px);
  text-align: center;
  border-top: 1px solid var(--line);
}
.placeholder-block .label {
  font-family: var(--font-display-en);
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
/* Tight letter-spacing on small screens — labels like
   "Testimonials — Voices from those who were there" overflow otherwise. */
@media (max-width: 720px) {
  .placeholder-block .label {
    letter-spacing: 0.18em;
    font-size: 10.5px;
  }
}
.placeholder-block h2 {
  font-family: var(--font-display-jp);
  font-size: clamp(22px, 3vw, 32px);
  color: var(--navy-deep);
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: 0.04em;
}
.placeholder-block p {
  font-size: clamp(13px, 1.3vw, 15px);
  color: var(--ink-muted);
  line-height: 1.9;
  max-width: 520px;
  margin: 0 auto;
}

/* About CTA */
.about-cta {
  background: var(--navy-darker);
  color: white;
  padding: clamp(70px, 10vw, 120px) clamp(24px, 6vw, 80px);
  text-align: center;
}
.about-cta h2 {
  font-family: var(--font-display-jp);
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 700;
  color: white;
  margin-bottom: clamp(24px, 4vw, 36px);
  line-height: 1.5;
}
.about-cta .cta-btn {
  display: inline-block;
  font-family: var(--font-display-en);
  font-size: clamp(13px, 1.3vw, 14px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--navy-deep);
  background: var(--gold);
  padding: clamp(16px, 2.2vw, 22px) clamp(32px, 5vw, 50px);
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
}
.about-cta .cta-btn:hover {
  background: var(--gold-bright);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(217,163,75,0.25);
}

/* =============================================
   LIFELINE — クイック俯瞰 (人生年表)
   ============================================= */
.lifeline {
  background: var(--bg-card);
  border-bottom: 1px solid var(--line);
  padding: clamp(60px, 9vw, 100px) clamp(24px, 6vw, 80px);
}
.lifeline-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.lifeline-header {
  text-align: center;
  margin-bottom: clamp(40px, 6vw, 64px);
}
.lifeline-label {
  font-family: var(--font-display-en);
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 14px;
}
.lifeline-title {
  font-family: var(--font-display-jp);
  font-size: clamp(24px, 3.8vw, 38px);
  font-weight: 700;
  color: var(--navy-deep);
  line-height: 1.45;
  letter-spacing: 0.03em;
  margin-bottom: 14px;
}
html[lang="en"] .lifeline-title {
  font-family: var(--font-display-en);
  font-style: italic;
  font-weight: 500;
}
.lifeline-sub {
  font-size: clamp(13px, 1.3vw, 15px);
  color: var(--ink-muted);
  letter-spacing: 0.05em;
  line-height: 1.7;
}

.lifeline-track {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  counter-reset: ll;
  margin: 0;
  padding: 0;
}
@media (max-width: 1100px) {
  .lifeline-track { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
@media (max-width: 720px) {
  .lifeline-track { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 480px) {
  .lifeline-track { grid-template-columns: 1fr; }
}

.ll-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: 4px;
  padding: 22px 18px 18px;
  position: relative;
  transition: transform .3s cubic-bezier(0.2,0.8,0.2,1), box-shadow .3s, border-color .3s;
  counter-increment: ll;
}
.ll-card::before {
  content: "0" counter(ll);
  position: absolute;
  top: 12px; right: 14px;
  font-family: var(--font-display-en);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink-dim);
  font-weight: 500;
}
.ll-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(30, 58, 95, 0.08);
  border-color: var(--gold-soft);
  border-top-color: var(--gold-bright);
}

.ll-age {
  font-family: var(--font-display-jp);
  font-size: clamp(15px, 1.7vw, 19px);
  font-weight: 700;
  color: var(--navy-deep);
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}
html[lang="en"] .ll-age { font-family: var(--font-display-en); font-style: italic; }

.ll-era {
  font-family: var(--font-display-en);
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--gold-dim);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 12px;
  overflow-wrap: anywhere;  /* "FAMILY · CORPORATE" etc. wrap on narrow cards */
}
/* Shrink letter-spacing on very narrow viewports so long era labels fit. */
@media (max-width: 600px) {
  .ll-era { letter-spacing: 0.12em; }
}
.ll-card h3 {
  font-family: var(--font-display-jp);
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 700;
  color: var(--navy-deep);
  line-height: 1.5;
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}
.ll-card p {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.75;
  margin-bottom: 12px;
}
.ll-vow {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-family: var(--font-display-jp);
  font-size: 11.5px;
  color: var(--gold-dim);
  line-height: 1.6;
  letter-spacing: 0.02em;
  font-weight: 500;
}

.lifeline-cta {
  text-align: center;
  margin-top: clamp(28px, 4vw, 40px);
}
.lifeline-cta a {
  font-family: var(--font-display-en);
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color .2s;
  font-weight: 500;
}
.lifeline-cta a:hover { color: var(--gold); }

/* =============================================
   About — Philosophy list
   ============================================= */
#philosophy .philosophy-list {
  list-style: none;
  padding: 0;
  margin: clamp(28px, 4vw, 44px) 0 0;
  display: grid;
  gap: clamp(20px, 2.6vw, 32px);
}
#philosophy .philosophy-list li {
  padding: clamp(20px, 2.6vw, 28px) clamp(22px, 3vw, 32px);
  background: var(--bg-subtle);
  border-left: 3px solid var(--gold);
}
#philosophy .ph-head {
  font-family: var(--font-display-jp);
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
#philosophy .philosophy-list li p {
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 2.0;
  color: var(--ink-soft);
}


/* =============================================
   Entities list — responsive 2-col → 1-col grid
   Replaces the inline grid-template-columns:130px 1fr that
   overflowed on mobile (long EN labels like "Non-profit (incorporating)").
   ============================================= */
.entities-list {
  list-style: none;
  padding: 0;
  margin: clamp(28px, 4vw, 44px) 0 0;
  display: grid;
  gap: clamp(16px, 2vw, 22px);
}
.entities-list .entity {
  padding: clamp(20px, 2.6vw, 28px) clamp(22px, 3vw, 32px);
  background: var(--bg-subtle);
  border-left: 3px solid var(--gold);
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: clamp(14px, 2vw, 22px);
  align-items: baseline;
}
.entities-list .entity-tag {
  font-family: var(--font-display-en);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  word-break: keep-all;
}
.entities-list .entity-name {
  font-family: var(--font-display-jp);
  font-size: clamp(15px, 1.7vw, 19px);
  font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 6px;
  line-height: 1.4;
}
.entities-list .entity-desc {
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-soft);
}

/* Mobile: stack the tag above the body */
@media (max-width: 640px) {
  .entities-list .entity {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .entities-list .entity-tag { letter-spacing: 0.18em; }
}

/* =============================================
   Testimonials section — mobile overflow fixes
   The footer meta lines use long uppercase letter-spaced English
   ("Human Orchestration · A founder we worked with") which overflows
   narrow viewports. Soften letter-spacing and allow wrapping. The
   inline styles are overridden with !important here. */
@media (max-width: 720px) {
  #testimonials .testimonial-meta {
    letter-spacing: 0.10em !important;
    font-size: 10px !important;
    overflow-wrap: anywhere;
    line-height: 1.6;
  }
  #testimonials .testimonial-quote {
    overflow-wrap: break-word;
  }
}

/* =============================================
   MOBILE OVERFLOW SAFETY NET (about-only sections)
   The fixes below are scoped to elements that exist only on /about
   to keep them out of the way on other pages.
   ============================================= */

/* about-cta: two CTA buttons used to sit side-by-side with letter-spacing
   0.3em — they extended past mobile viewports. Stack them and tighten. */
@media (max-width: 640px) {
  .about-cta { padding-left: 18px; padding-right: 18px; }
  .about-cta .cta-btn {
    display: inline-block;
    margin: 6px 0 !important;  /* override inline margin-left: 12px on second btn */
    letter-spacing: 0.15em;
    padding: 14px 22px;
    font-size: 12px;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
}

/* lifeline-track: bump 1-column breakpoint up so cards have room
   for content like "サラリーマン × 体験学習" / "The Salaryman as Apprentice". */
@media (max-width: 640px) {
  .lifeline-track { grid-template-columns: 1fr !important; }
}

/* entities: ensure tag column collapses even at the narrowest viewports
   (already collapses at 640px; double-make-sure here). */
@media (max-width: 480px) {
  .entities-list .entity { grid-template-columns: 1fr !important; }
}

/* testimonial-meta: at very narrow widths, drop letter-spacing further
   and allow words to break if needed. */
@media (max-width: 480px) {
  #testimonials .testimonial-meta {
    letter-spacing: 0.06em !important;
    font-size: 9.5px !important;
    word-break: break-word;
  }
}

/* placeholder-block label: tightest setting at ultra-narrow viewports
   (~360px) where even 0.18em is too wide for "Testimonials — Voices…". */
@media (max-width: 380px) {
  .placeholder-block .label { letter-spacing: 0.08em; font-size: 10px; }
}

/* journey list j-marker on mobile: when in flex-row mode, allow wrapping
   so "30s — 40s" + "Corporate" can break to 2 lines if needed. */
@media (max-width: 480px) {
  .j-marker { flex-wrap: wrap; }
  .j-marker .age { font-size: 16px; }
}

/* page-header at the very top: long EN like "About Tetsuya Itoh" already
   wraps, but ensure padding doesn't crowd it. */
@media (max-width: 480px) {
  .page-header { padding-left: 18px; padding-right: 18px; padding-top: 110px; }
}

/* =============================================
   HARD overflow-x clip per section.
   /about uniquely chains many full-version sections (Lifeline / full
   Origin / Journey / Stance / Philosophy / Testimonials / Entities /
   about-cta). Any one of them with a wider-than-viewport descendant
   would propagate horizontal scroll to <html>. Clipping per section
   guarantees the page can't horizontally scroll on mobile, no matter
   which child element misbehaves. */
.page-header,
.lifeline,
.origin,
.about,
.journey,
.placeholder-block,
.about-cta {
  overflow-x: clip;            /* Modern browsers: clip without becoming scroll-context */
}
/* Fallback for older browsers that don't support overflow-x: clip */
@supports not (overflow-x: clip) {
  .page-header,
  .lifeline,
  .origin,
  .about,
  .journey,
  .placeholder-block,
  .about-cta {
    overflow-x: hidden;
  }
}