/* ============================================================
   Shared sub-page styles (news / interviews / training)
   loaded after styles.css
   ============================================================ */

.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);
}
.site-header.is-static .brand-mark-light{ opacity:0; }
.site-header.is-static .brand-mark-dark{ opacity:1; }
.site-nav a.is-current::after{ content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background:currentColor; }

a{ color:inherit; }
a:hover{ color:var(--teal); }
.site-header a:hover, .site-footer a:hover, .cta-section a:hover{ color:inherit; }

/* ---------- 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:1100px; margin:0 auto; padding:60px 0 80px; }
.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; flex-wrap:wrap; }
.page-hero-crumbs a{ transition:color .2s ease; }
.page-hero-crumbs a:hover{ color:var(--teal); }
.page-hero-label{ display:flex; align-items:baseline; gap:18px; margin-bottom:32px; flex-wrap:wrap; }
.phl-num{ font-family:var(--en); font-size:12px; letter-spacing:.24em; color:var(--teal); }
.phl-jp{ font-family:var(--serif); font-size:clamp(15px, 1.6vw, 22px); font-weight:500; letter-spacing:.14em; 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(32px, 5.2vw, 72px); 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:56ch; }

/* ---------- LIST PAGE SHELL ---------- */
.list-section{ padding:96px var(--pad-x) 140px; max-width:var(--max); margin:0 auto; }
.list-head{ display:flex; flex-direction:column; gap:14px; margin-bottom:36px; }
.list-head-title{ font-family:var(--serif); font-size:clamp(20px, 2.2vw, 26px); font-weight:500; letter-spacing:.12em; }
.list-count{ font-family:var(--en); font-size:12px; letter-spacing:.2em; color:var(--ink-60); }

/* ---------- FILTERS ---------- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:10px; padding-bottom:28px; border-bottom:1px solid var(--line); margin-bottom:8px; }
.filter-btn{ padding:10px 18px; border:1px solid var(--line); font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.14em; color:var(--ink-60); transition:background .2s ease, color .2s ease, border-color .2s ease; }
.filter-btn:hover{ border-color:var(--teal); color:var(--teal); }
.filter-btn.is-active{ background:var(--teal); border-color:var(--teal); color:#fff; }
.filter-empty{ padding:48px 0; font-size:14px; color:var(--ink-60); letter-spacing:.06em; }

/* ---------- NEWS LIST ---------- */
.news-list{ border-top:1px solid var(--line); }
.news-list li{ border-bottom:1px solid var(--line); }
.news-list li[hidden]{ display:none; }
.news-list a{ display:grid; grid-template-columns:120px 150px 1fr auto; gap:28px; align-items:baseline; padding:28px 0; transition:padding .25s ease, color .2s ease; }
.news-list a:hover{ padding-left:8px; color:var(--teal); }
.nl-date{ font-family:var(--en); font-size:13px; letter-spacing:.18em; color:var(--ink-60); }
.nl-cat{ justify-self:start; padding:5px 12px; border:1px solid var(--teal-soft); font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.14em; color:var(--teal); white-space:nowrap; }
.nl-title{ font-family:var(--sans); font-size:15px; font-weight:500; line-height:1.85; letter-spacing:.04em; text-wrap:pretty; }
.nl-arrow{ opacity:.45; align-self:center; }

/* ---------- INTERVIEW CARDS ---------- */
.iv-lede{ max-width:60ch; font-size:15px; line-height:2.05; letter-spacing:.05em; color:#2a2a2a; }
.iv-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:48px; margin-top:40px; }
.iv-card{ display:flex; flex-direction:column; gap:22px; transition:transform .35s ease; }
.iv-card[hidden]{ display:none; }
.iv-card:hover{ transform:translateY(-6px); }
.iv-img{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--teal-tint); }
.iv-img img, .iv-img image-slot{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.iv-pref{ position:absolute; top:20px; left:20px; z-index:3; padding:6px 14px; background:rgba(255,255,255,.94); color:var(--teal); font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.2em; }
.iv-body{ display:flex; flex-direction:column; gap:12px; }
.iv-title{ font-family:var(--serif); font-size:21px; font-weight:500; line-height:1.6; letter-spacing:.05em; }
.iv-desc{ font-size:13px; line-height:1.95; letter-spacing:.04em; color:var(--ink-60); }
.iv-link{ margin-top:4px; font-size:13px; font-weight:500; letter-spacing:.16em; color:var(--teal); }

@media (max-width: 880px){
  .page-hero{ padding-top:120px; }
  .page-hero-inner{ padding:40px 0 56px; }
  .page-hero-crumbs{ margin-bottom:32px; }
  .list-section{ padding:64px var(--pad-x) 96px; }
  .news-list a{ grid-template-columns:auto 1fr; grid-template-areas:"date cat" "title title"; gap:10px 16px; padding:22px 0; }
  .nl-date{ grid-area:date; }
  .nl-cat{ grid-area:cat; }
  .nl-title{ grid-area:title; }
  .nl-arrow{ display:none; }
  .iv-grid{ grid-template-columns:1fr; gap:36px; }
}
@media (max-width: 520px){
  .page-hero-title{ font-size:28px; }
  .filter-btn{ padding:9px 14px; font-size:11px; letter-spacing:.1em; }
}