/*
 * Frontier Leaders — interviews subsite styles.
 * Scoped under body.fl-page so this never affects other magazine pages.
 */

body.fl-page {
  --ink:        #1E3A8A;
  --ink-deep:   #14225C;
  --ink-light:  #2C50B0;
  --ink-pale:   #E8EEFB;
  --black:      #0A0A0A;
  --body:       #1A1A1A;
  --muted:      #6B7280;
  --mutedlight: #9CA3AF;
  --rule:       #E5E7EB;
  --rule-soft:  #F0F0F0;
  --white:      #FFFFFF;
  --off:        #F7F7F5;

  --serif-en:  'Playfair Display', Georgia, serif;
  --serif-jp:  'Noto Serif JP', 'Hiragino Mincho ProN', '游明朝', serif;
  --sans-en:   'Inter', -apple-system, sans-serif;
  --sans-jp:   'Noto Sans JP', 'Hiragino Sans', sans-serif;

  --fl-gutter: 40px;
  --fl-max: 1180px;

  background: var(--white);
  color: var(--body);
  font-family: var(--serif-jp);
  font-weight: 400;
  line-height: 1.85;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.fl-page *, body.fl-page *::before, body.fl-page *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}

/* iOS Safari real-device fixes. Chrome desktop mobile emulation doesn't
   reproduce these because real WebKit on a device handles default
   margins and viewport edges differently than the desktop preview. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body.fl-page {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-x: hidden;
}
body.fl-page img { max-width: 100%; display: block; }
body.fl-page a { color: inherit; text-decoration: none; }
body.fl-page ::selection { background: var(--ink-pale); color: var(--ink-deep); }

/* Hide Cocoon's auto-injected table of contents on interview pages.
   The interviewee profile aside fills the same "between intro and body"
   slot, so a TOC there would compete with it. */
body.fl-page .toc,
body.fl-page #toc,
body.fl-page .toc-box,
body.fl-page .toc-content { display: none !important; }

/* EN mode: swap the body serif to a Latin face and disable Japanese palt,
   which otherwise eats the space between "of" and "AI" in tags like
   "Voices from the frontier of AI × Blockchain". */
body.fl-en {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-feature-settings: normal;
}
body.fl-en .fl-header-tag,
body.fl-en .fl-hero-title,
body.fl-en .fl-hero-author,
body.fl-en .fl-page-title-jp,
body.fl-en .fl-page-lede,
body.fl-en .fl-article-title,
body.fl-en .fl-article-meta,
body.fl-en .fl-article-title-main,
body.fl-en .fl-lede,
body.fl-en .fl-article-body h2,
body.fl-en .fl-article-body p,
body.fl-en .fl-pullquote q,
body.fl-en .fl-author-bio .fl-name,
body.fl-en .fl-author-bio .fl-bio,
body.fl-en .fl-next-title,
body.fl-en .fl-next-meta,
body.fl-en .fl-next-cta-title,
body.fl-en .fl-footer-tag {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-feature-settings: normal;
}

@keyframes fl-fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.fl-page .fl-reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity 700ms cubic-bezier(0.2,0.7,0.2,1),
              transform 700ms cubic-bezier(0.2,0.7,0.2,1);
  will-change: opacity, transform;
}
body.fl-page .fl-reveal.in { opacity: 1; transform: translateY(0); }

body.fl-page .fl-container { max-width: var(--fl-max); margin: 0 auto; padding: 0 var(--fl-gutter); }

/* HEADER */
body.fl-page .fl-site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 18px 0;
  background: var(--ink-deep);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
body.fl-page .fl-site-header .fl-row {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 36px;
}
body.fl-page .fl-brand-block { display: flex; align-items: center; gap: 20px; }
body.fl-page .fl-brand {
  font-family: var(--serif-en);
  font-weight: 500; font-style: italic;
  font-size: 26px; letter-spacing: -0.005em;
  color: var(--white); line-height: 1;
  text-decoration: none;
}
body.fl-page .fl-header-tag {
  padding-left: 20px; border-left: 1px solid rgba(255,255,255,0.22);
  font-family: var(--serif-jp); font-weight: 400;
  font-size: 12px; line-height: 1.55; color: rgba(255,255,255,0.72);
  letter-spacing: 0.02em;
}

body.fl-page .fl-nav {
  display: flex; gap: 24px; align-items: center;
}
body.fl-page .fl-operated {
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.78);
  position: relative; padding-bottom: 0;
  transition: opacity 200ms ease;
}
body.fl-page .fl-operated::after { display: none; }
body.fl-page .fl-operated:hover { opacity: 0.85; }
body.fl-page .fl-header-pm-logo {
  height: 28px !important; width: auto !important;
  max-width: 160px !important;
  opacity: 0.95;
  display: block;
}

body.fl-page .fl-lang {
  display: inline-flex; align-items: center; gap: 6px;
  padding-left: 18px;
  border-left: 1px solid rgba(255,255,255,0.18);
  font-family: var(--sans-en); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase;
}
body.fl-page .fl-lang a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 200ms ease;
}
body.fl-page .fl-lang a:hover { color: var(--white); }
body.fl-page .fl-lang a[aria-current="page"] { color: var(--white); }
body.fl-page .fl-lang-sep { color: rgba(255,255,255,0.3); }

/* PAGE BAND (listing hero) */
body.fl-page .fl-page-band {
  padding: 130px 0 56px;
  background: var(--off);
  position: relative; overflow: hidden;
}
body.fl-page .fl-page-band::before {
  content: ''; position: absolute;
  top: -200px; left: 50%; transform: translateX(-50%);
  width: 1200px; height: 700px;
  background: radial-gradient(ellipse, #DCE4F7 0%, #ECF0FB 40%, transparent 75%);
  opacity: 0.5; pointer-events: none; z-index: 0;
}
body.fl-page .fl-page-band > .fl-container { position: relative; z-index: 1; }
body.fl-page .fl-crumbs {
  font-family: var(--sans-en);
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 16px;
}
body.fl-page .fl-crumbs a:hover { color: var(--ink); }
body.fl-page .fl-page-title {
  font-family: var(--serif-en); font-weight: 400;
  font-size: clamp(40px, 6vw, 64px);
  letter-spacing: -0.005em; line-height: 1.15;
  color: var(--ink-deep);
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
body.fl-page .fl-page-title-jp {
  font-family: var(--serif-jp); font-weight: 500;
  font-size: 22px; letter-spacing: 0.02em;
  color: var(--body);
}
body.fl-page .fl-page-lede {
  font-family: var(--serif-jp); font-weight: 400;
  font-size: 14.5px; line-height: 1.95;
  color: var(--muted); max-width: 680px;
  margin-top: 22px;
}

/* ARTICLE CARDS */
body.fl-page .fl-article-date {
  display: inline-block;
  font-family: var(--serif-en); font-weight: 400;
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--ink); line-height: 1;
}
body.fl-page .fl-article-date::before {
  content: ''; display: inline-block; width: 18px; height: 1px;
  background: var(--ink); vertical-align: middle; margin-right: 10px; opacity: 0.5;
}

/* HERO (top of listing, page 1 only) */
body.fl-page .fl-hero { padding: 96px 0 0; }
body.fl-page .fl-hero-article { display: block; position: relative; }
body.fl-page .fl-hero-figure {
  position: relative; aspect-ratio: 16 / 9;
  background:
    linear-gradient(135deg, rgba(20,34,92,0.35), rgba(30,58,138,0.15)),
    repeating-linear-gradient(45deg, #DCE4F7 0 14px, #E8EEFB 14px 28px);
  overflow: hidden;
}
body.fl-page .fl-hero-figure img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms cubic-bezier(0.2,0.7,0.2,1);
}
body.fl-page .fl-hero-article:hover .fl-hero-figure img { transform: scale(1.03); }
body.fl-page .fl-hero-figure::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.68) 100%);
  pointer-events: none;
}
body.fl-page .fl-hero-overlay {
  text-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 4px 24px rgba(0,0,0,0.3);
}
body.fl-page .fl-hero-overlay {
  position: absolute; left: 40px; right: 40px; bottom: 36px;
  z-index: 2; color: var(--white);
  max-width: 920px;
}
body.fl-page .fl-hero-overlay .fl-article-date {
  color: rgba(255,255,255,0.85);
}
body.fl-page .fl-hero-overlay .fl-article-date::before {
  background: rgba(255,255,255,0.6);
}
body.fl-page .fl-hero-title {
  font-family: var(--serif-jp); font-weight: 500;
  font-size: 38px; line-height: 1.4;
  color: var(--white);
  margin: 16px 0 0;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
body.fl-page .fl-hero-author {
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.35);
  font-family: var(--serif-jp);
  font-size: 14px; color: rgba(255,255,255,0.92);
}
body.fl-page .fl-hero-author .fl-name {
  font-weight: 500; color: var(--white);
}
body.fl-page .fl-hero-author .fl-name + .fl-hero-role::before {
  content: " / ";
  margin: 0 6px;
  color: rgba(255,255,255,0.5);
}
@media (max-width: 900px) {
  /* Name and role-segments stack on phones — the " / " separator
     dangles on its own row, so suppress it. */
  body.fl-page .fl-hero-author .fl-name + .fl-hero-role::before { content: ""; margin: 0; }
}

/* LISTING GRID */
body.fl-page .fl-list-section { padding: 64px 0 96px; }
body.fl-page .fl-latest-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 56px 40px;
}
body.fl-page .fl-article-card { display: block; }
body.fl-page .fl-article-figure {
  aspect-ratio: 16/10;
  background:
    linear-gradient(135deg, rgba(20,34,92,0.20), rgba(30,58,138,0.08)),
    repeating-linear-gradient(45deg, #ECF0FB 0 10px, #F4F6FC 10px 20px);
  margin-bottom: 18px;
  overflow: hidden;
  position: relative;
}
body.fl-page .fl-article-figure img {
  width: 100%; height: 100%; object-fit: cover;
}
body.fl-page .fl-article-card:hover .fl-article-figure { transform: scale(1.01); transition: transform 600ms ease; }
body.fl-page .fl-article-card .fl-article-date { margin-bottom: 10px; }
body.fl-page .fl-article-title {
  font-family: var(--serif-jp); font-weight: 500;
  font-size: 17px; line-height: 1.6;
  color: var(--black); letter-spacing: 0.005em;
  margin-bottom: 14px; text-wrap: pretty;
  transition: color 240ms ease;
}
body.fl-page .fl-article-card:hover .fl-article-title { color: var(--ink-deep); }
body.fl-page .fl-article-meta {
  font-family: var(--serif-jp); font-size: 13px; line-height: 1.7;
  color: var(--muted); letter-spacing: 0.02em;
  padding-top: 12px; border-top: 1px solid var(--rule);
}
body.fl-page .fl-article-meta .fl-name { color: var(--body); font-weight: 500; font-size: 13.5px; }

/* PAGINATION */
body.fl-page .fl-pagination {
  margin-top: 72px;
  display: flex; justify-content: center; align-items: center;
  gap: 8px;
  font-family: var(--serif-en);
}
body.fl-page .fl-pagination a,
body.fl-page .fl-pagination span {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--muted);
  border-radius: 999px;
  transition: all 200ms ease;
}
body.fl-page .fl-pagination a:hover { color: var(--ink); background: var(--ink-pale); }
body.fl-page .fl-pagination .current {
  color: var(--white); background: var(--ink-deep);
}
body.fl-page .fl-pagination .prev,
body.fl-page .fl-pagination .next {
  width: auto;
  font-family: var(--sans-en);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); padding: 0 18px;
  background: transparent;
}
body.fl-page .fl-pagination .prev:hover,
body.fl-page .fl-pagination .next:hover { color: var(--ink); background: transparent; }
body.fl-page .fl-pagination .dots { color: var(--mutedlight); }

/* ABOUT THE MEDIA (listing page) */
body.fl-page .fl-mission-section {
  padding: 64px 0 80px;
}
body.fl-page .fl-mission-grid {
  max-width: 820px;
  margin: 0 auto;
}
body.fl-page .fl-mission-label {
  text-align: left;
  margin-bottom: 24px;
}
/* Section-index defines a 24px hairline before .fl-label; suppress it
   for the mission section. Match its specificity with both classes. */
body.fl-page .fl-mission-label.fl-section-index .fl-label::before { display: none !important; }
body.fl-page .fl-mission-body h2 {
  font-family: var(--serif-jp); font-weight: 500;
  font-size: 30px; line-height: 1.55;
  color: var(--ink-deep);
  margin-bottom: 28px;
  letter-spacing: 0.005em;
}
body.fl-page .fl-mission-body p {
  font-family: var(--serif-jp); font-weight: 400;
  font-size: 15.5px; line-height: 2.05;
  color: var(--body); letter-spacing: 0.01em;
  margin-bottom: 22px;
}
body.fl-page .fl-mission-body p:last-of-type { margin-bottom: 0; }

body.fl-page .fl-company-subblock {
  margin-top: 40px;
  padding: 24px 0 0 0;
  position: relative;
}
body.fl-page .fl-company-sublabel {
  display: inline-block;
  margin-bottom: 18px;
  font-family: var(--sans-en); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
}
body.fl-page .fl-company-logo {
  height: 40px !important; width: auto !important; max-width: 200px !important;
  display: block;
  margin: 0 0 22px;
}
body.fl-page .fl-company-body p {
  font-family: var(--serif-jp); font-size: 14.5px; line-height: 2.0;
  color: var(--body);
  margin-bottom: 18px;
}
body.fl-page .fl-company-meta {
  margin-top: 22px;
  border-top: 1px solid var(--rule);
  padding-top: 20px;
  display: grid; grid-template-columns: 110px 1fr;
  gap: 10px 22px;
  font-family: var(--serif-jp); font-size: 13.5px;
}
body.fl-page .fl-company-meta dt {
  color: var(--muted);
  font-family: var(--sans-en); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding-top: 2px;
}
body.fl-page .fl-company-meta dd { color: var(--body); margin: 0; }
body.fl-page .fl-company-meta a {
  color: var(--ink); border-bottom: 1px solid var(--ink-pale);
  transition: color 240ms ease, border-color 240ms ease;
}
body.fl-page .fl-company-meta a:hover { color: var(--ink-deep); border-bottom-color: var(--ink); }
body.fl-page .fl-contact-btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--serif-jp);
  font-size: 14px; letter-spacing: 0.08em;
  padding: 14px 32px;
  margin-top: 36px;
  color: var(--white) !important;
  background: var(--ink-deep);
  border-radius: 999px;
  text-decoration: none;
  transition: background 240ms ease, transform 240ms ease, box-shadow 240ms ease;
}
body.fl-page .fl-contact-btn:hover {
  background: var(--ink); transform: translateY(-1px);
  box-shadow: 0 14px 32px -16px rgba(20,34,92,0.45);
}
body.fl-page .fl-contact-btn span { font-size: 12px; opacity: 0.7; }

/* ARTICLE HERO (single) */
body.fl-page .fl-article-hero {
  padding: 80px 0 32px;
  background:
    linear-gradient(
      180deg,
      var(--off) 0%,
      var(--off) calc(100% - 56px),
      var(--white) 100%
    );
}
body.fl-page .fl-article-hero-meta {
  text-align: center;
  padding: 32px 0 36px;
}
body.fl-page .fl-article-cat {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--sans-en); font-size: 10px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 32px;
}
body.fl-page .fl-article-cat::before,
body.fl-page .fl-article-cat::after {
  content: '';
  width: 36px;
  height: 1px;
  background: var(--ink);
  opacity: 0.35;
}
body.fl-page .fl-article-title-main {
  font-family: var(--serif-jp); font-weight: 500;
  font-size: 42px; line-height: 1.25;
  letter-spacing: 0.005em;
  color: var(--black);
  max-width: 1040px; margin: 0 auto;
  text-wrap: balance;
}
body.fl-page .fl-article-hero-author {
  margin-top: 36px;
}
body.fl-page .fl-article-hero-author .fl-name {
  display: block;
  font-family: var(--serif-jp); font-weight: 500;
  font-size: 20px; color: var(--black);
  margin-bottom: 8px;
}
body.fl-page .fl-article-hero-author .fl-article-hero-role {
  display: block;
  font-family: var(--serif-jp);
  font-size: 14px;
  color: #475569; /* グレイッシュネイビー: --muted #6B7280 より少し濃く */
  line-height: 1.7;
}
/* PC / SP viewport-switched text. Used in hero title, hero role, aside
   role wherever editors want different line breaks per viewport.
   Inside role wrappers, the visible variant goes block so manual
   newlines stack as separate rows. */
body.fl-page .fl-vp-pc { display: inline; }
body.fl-page .fl-vp-sp { display: none; }
body.fl-page .fl-article-hero-role .fl-vp-pc,
body.fl-page .fl-role-breakable .fl-vp-pc { display: block; }
body.fl-page .fl-article-hero-role .fl-vp-sp,
body.fl-page .fl-role-breakable .fl-vp-sp { display: none; }

@media (max-width: 900px) {
  body.fl-page .fl-vp-pc { display: none; }
  body.fl-page .fl-vp-sp { display: inline; }
  body.fl-page .fl-article-hero-role .fl-vp-pc,
  body.fl-page .fl-role-breakable .fl-vp-pc { display: none; }
  body.fl-page .fl-article-hero-role .fl-vp-sp,
  body.fl-page .fl-role-breakable .fl-vp-sp { display: block; }
}
body.fl-page .fl-article-hero-date {
  margin-top: 28px;
  font-family: var(--serif-en);
  font-size: 13px; color: var(--ink);
}
body.fl-page .fl-article-hero-date .fl-date {}
body.fl-page .fl-article-hero-date .fl-date + .fl-interview-by::before {
  content: " — ";
}
body.fl-page .fl-article-hero-date .fl-interviewer-role {
  color: var(--muted);
}
body.fl-page .fl-article-hero-date .fl-interview-by + .fl-interviewer-role::before {
  content: "（";
}
body.fl-page .fl-article-hero-date .fl-interviewer-role::after {
  content: "）";
}

/* Role split-by-/ rendering. PC: inline with " / " between; SP: stacked. */
body.fl-page .fl-role-segments { display: inline; }
body.fl-page .fl-role-segments > span { display: inline; }
body.fl-page .fl-role-segments > span + span::before {
  content: " / ";
  color: var(--mutedlight);
  margin: 0 4px;
}
body.fl-page .fl-article-hero-img {
  max-width: 1280px; margin: 0 auto;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(135deg, rgba(20,34,92,0.40), rgba(30,58,138,0.15)),
    repeating-linear-gradient(45deg, #DCE4F7 0 14px, #E8EEFB 14px 28px);
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
body.fl-page .fl-article-hero-img img {
  width: 100%; height: 100%; object-fit: cover;
}

/* ARTICLE BODY */
body.fl-page .fl-article-body-wrap { padding: 40px 0 96px; }
body.fl-page .fl-article-body {
  max-width: calc(720px + (var(--fl-gutter) * 2));
  margin: 0 auto;
  padding: 0 var(--fl-gutter);
}
body.fl-page .fl-lede {
  font-family: var(--serif-jp); font-weight: 500;
  font-size: 22px; line-height: 1.75;
  color: var(--black);
  margin-bottom: 56px;
  padding-bottom: 32px; border-bottom: 1px solid var(--rule);
}
body.fl-page .fl-article-body h2 {
  font-family: var(--serif-jp); font-weight: 500;
  font-size: 22px; line-height: 1.5;
  color: var(--ink-deep);
  margin: 56px 0 28px;
  letter-spacing: 0.005em;
}
body.fl-page .fl-article-body p {
  font-family: var(--serif-jp); font-weight: 400;
  font-size: 15.5px; line-height: 2.05;
  color: var(--body); letter-spacing: 0.01em;
  margin-bottom: 28px;
}
body.fl-page .fl-article-body img {
  margin: 28px auto;
  height: auto;
}
body.fl-page .fl-pullquote {
  margin: 64px -40px;
  padding: 48px 40px;
  border-top: 1px solid var(--ink-pale);
  border-bottom: 1px solid var(--ink-pale);
  text-align: center;
  background: linear-gradient(180deg, #FBFCFE 0%, #F7F9FE 100%);
}
body.fl-page .fl-pullquote-mark {
  font-family: var(--serif-en);
  font-size: 56px; color: var(--ink);
  line-height: 0.6; display: block; margin-bottom: 18px;
}
body.fl-page .fl-pullquote q {
  font-family: var(--serif-jp); font-weight: 500;
  font-size: 22px; line-height: 1.7;
  color: var(--ink-deep);
  quotes: none;
  letter-spacing: 0.01em;
}
body.fl-page .fl-pullquote q::before,
body.fl-page .fl-pullquote q::after { content: none; }
body.fl-page .fl-pullquote .fl-attr {
  margin-top: 22px;
  font-family: var(--serif-en);
  font-size: 13px; color: var(--muted);
  display: block;
}

/* Speaker label highlight (e.g. "磯和：" at start of paragraph) */
body.fl-page .fl-speaker {
  color: var(--ink);
  font-weight: 500;
}

/* Closing note above the interviewer aside */
body.fl-page .fl-closing-sep {
  margin: 64px 0 40px;
  border: 0;
  border-top: 1px solid var(--rule);
  height: 0;
}
body.fl-page .fl-closing {
  font-family: var(--serif-jp);
  color: var(--body);
  font-size: 15.5px;
  line-height: 2.05;
  margin-bottom: 56px;
}
body.fl-en .fl-closing { font-family: 'Source Serif 4', Georgia, serif; }
body.fl-page .fl-closing p { margin-bottom: 1em; }
body.fl-page .fl-closing p:last-child { margin-bottom: 0; }

/* Author bio */
body.fl-page .fl-author-bio {
  margin: 80px auto 0;
  max-width: 720px;
  padding: 36px;
  background: var(--off);
  /* Use inset box-shadow rather than border-left so the 3px accent line
     doesn't shift the inner content area to the right via box-sizing. */
  box-shadow: inset 3px 0 0 var(--ink);
  display: grid; grid-template-columns: 96px 1fr; gap: 24px;
  align-items: start;
}
body.fl-page .fl-author-photo {
  width: 96px; height: 96px;
  background:
    linear-gradient(135deg, rgba(20,34,92,0.35), rgba(30,58,138,0.10)),
    repeating-linear-gradient(45deg, #DCE4F7 0 6px, #E8EEFB 6px 12px);
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
/* Cocoon's global "img { height: auto }" beats normal specificity, so
   we !important the dimensions. Use a non-hard-cropped WP image size in
   markup and crop inside this circle so object-position can preserve faces. */
body.fl-page .fl-author-photo img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  object-fit: cover;
  object-position: center top;
  display: block;
}
body.fl-page .fl-author-bio .fl-label {
  font-family: var(--sans-en); font-size: 9px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
body.fl-page .fl-author-bio .fl-name {
  font-family: var(--serif-jp); font-weight: 500;
  font-size: 18px; color: var(--black);
}
body.fl-page .fl-author-bio .fl-furigana {
  font-family: var(--serif-jp); font-weight: 400;
  font-size: 13px; color: var(--muted);
  margin-left: 2px;
}
body.fl-page .fl-author-bio .fl-role {
  font-family: var(--serif-en);
  font-size: 13px; color: var(--ink); margin-top: 2px;
}
body.fl-page .fl-author-bio .fl-bio {
  font-family: var(--serif-jp); font-size: 13px; line-height: 1.85;
  color: var(--muted); margin-top: 12px;
}
body.fl-page .fl-author-bio.fl-bio-bottom {
  margin: 64px auto 0;
  box-shadow: inset 3px 0 0 var(--mutedlight);
}
body.fl-page .fl-author-bio.fl-bio-bottom .fl-label { color: var(--mutedlight); }
body.fl-page .fl-author-bio.fl-bio-interviewee { margin: 32px auto 40px; }

/* NEXT READS */
body.fl-page .fl-next-reads {
  background: var(--off);
  padding: 80px 0;
}
body.fl-page .fl-section-index {
  font-family: var(--serif-en); font-weight: 400;
  font-size: 14px; letter-spacing: 0.05em;
  color: var(--ink);
  text-align: center;
  margin-bottom: 48px;
  display: block;
}
body.fl-page .fl-section-index .fl-label {
  font-family: var(--sans-en); font-style: normal;
  font-size: 11px; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--muted);
  position: relative; top: -1px;
}
body.fl-page .fl-section-index .fl-label::before {
  content: ''; display: inline-block;
  width: 24px; height: 1px;
  background: var(--rule);
  vertical-align: middle; margin-right: 16px;
}
body.fl-page .fl-next-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 40px; margin-top: 40px;
}
body.fl-page .fl-next-card { display: block; }
body.fl-page .fl-next-figure {
  aspect-ratio: 16/10;
  background:
    linear-gradient(135deg, rgba(20,34,92,0.20), rgba(30,58,138,0.08)),
    repeating-linear-gradient(45deg, #ECF0FB 0 10px, #F4F6FC 10px 20px);
  margin-bottom: 16px;
  overflow: hidden;
  transition: transform 800ms cubic-bezier(0.2,0.7,0.2,1);
}
body.fl-page .fl-next-figure img {
  width: 100%; height: 100%; object-fit: cover;
}
body.fl-page .fl-next-card:hover .fl-next-figure { transform: scale(1.03); }
body.fl-page .fl-next-card .fl-article-date { margin-bottom: 10px; }
body.fl-page .fl-next-title {
  font-family: var(--serif-jp); font-weight: 500;
  font-size: 16px; line-height: 1.6;
  color: var(--black); margin-bottom: 12px;
}
body.fl-page .fl-next-meta {
  font-family: var(--serif-jp); font-size: 12.5px; line-height: 1.65;
  color: var(--muted); padding-top: 10px; border-top: 1px solid var(--rule);
}
body.fl-page .fl-next-meta .fl-name { color: var(--body); font-weight: 500; }
body.fl-page .fl-next-cta {
  margin-top: 56px;
  display: flex; justify-content: center;
}
body.fl-page .fl-next-cta-link {
  display: inline-flex; align-items: baseline; gap: 18px;
  padding: 18px 36px;
  border: 1px solid var(--ink-deep);
  background: transparent;
  color: var(--ink-deep); text-decoration: none;
  transition: background 220ms ease, color 220ms ease, gap 220ms ease;
}
body.fl-page .fl-next-cta-link:hover { background: var(--ink-deep); color: #fff; gap: 28px; }
body.fl-page .fl-next-cta-label {
  font-family: var(--serif-en); font-weight: 400;
  font-size: 14px; letter-spacing: 0.04em;
}
body.fl-page .fl-next-cta-title {
  font-family: var(--serif-jp); font-weight: 500;
  font-size: 15px; letter-spacing: 0.02em;
}
body.fl-page .fl-next-cta-arrow {
  font-family: var(--serif-en); font-size: 16px;
  transition: transform 220ms ease;
}
body.fl-page .fl-next-cta-link:hover .fl-next-cta-arrow { transform: translateX(4px); }

/* FOOTER */
body.fl-page .fl-footer { background: var(--ink-deep); color: rgba(255,255,255,0.78); padding: 64px 0 36px; }
body.fl-page .fl-footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 56px;
  padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.10);
}
body.fl-page .fl-footer-brand {
  font-family: var(--serif-en); font-style: italic; font-weight: 500;
  font-size: 26px; color: var(--white); line-height: 1; margin-bottom: 14px;
}
body.fl-page .fl-footer-tag {
  font-family: var(--serif-jp); font-weight: 500; font-size: 13px; line-height: 1.8;
  color: rgba(255,255,255,0.7); max-width: 360px;
}
body.fl-page .fl-footer-pm {
  font-family: var(--sans-en); font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
  margin-top: 18px; margin-bottom: 8px;
}
body.fl-page .fl-footer-pm-logo {
  height: 28px !important; width: auto !important;
  max-width: 180px !important;
  opacity: 0.95;
  display: block;
}
body.fl-page .fl-footer-col h4 {
  font-family: var(--sans-en); font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase; color: rgba(255,255,255,0.55); font-weight: 500;
  margin-bottom: 18px;
}
body.fl-page .fl-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
body.fl-page .fl-footer-col ul li {
  font-family: var(--sans-jp); font-size: 13px;
  line-height: 2; color: rgba(255,255,255,0.85);
}
body.fl-page .fl-footer-col a {
  font-family: var(--sans-jp); font-size: 13px; color: rgba(255,255,255,0.82);
  letter-spacing: 0.02em;
  transition: color 200ms ease;
}
body.fl-page .fl-footer-col a:hover { color: var(--white); }
body.fl-page .fl-footer-meta {
  display: flex; justify-content: space-between; padding-top: 24px;
  font-family: var(--sans-en); font-size: 11px; letter-spacing: 0.05em;
  color: rgba(255,255,255,0.5);
}
body.fl-page .fl-footer-meta a { color: rgba(255,255,255,0.78); }
body.fl-page .fl-footer-meta a:hover { color: var(--white); }

/* WP admin bar offset (so fixed header doesn't go under admin bar) */
body.fl-page.admin-bar .fl-site-header { top: 32px; }

/* RESPONSIVE */
@media (max-width: 900px) {
  body.fl-page { --fl-gutter: 28px; }
  body.fl-page .fl-site-header { padding: 12px 0; }
  body.fl-page .fl-brand { font-size: 20px; }
  body.fl-page .fl-header-tag { display: none; }
  body.fl-page .fl-nav { gap: 14px; }
  body.fl-page .fl-header-pm-logo {
    height: 26px !important;
    max-width: 150px !important;
  }
  body.fl-page .fl-lang { padding-left: 12px; }
  body.fl-page .fl-page-title { font-size: 36px; }
  body.fl-page .fl-hero { padding: 72px 0 0; }
  body.fl-page .fl-hero-figure { aspect-ratio: 4/5; }
  /* Tall portrait crops + long titles mean the overlay overlaps the
     bright upper half of the photo. Push the dark gradient higher and
     darker on phones so the white type stays legible. */
  body.fl-page .fl-hero-figure::after {
    background: linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.55) 30%,
      rgba(0,0,0,0.9) 100%
    );
  }
  body.fl-page .fl-hero-overlay { left: 20px; right: 20px; bottom: 22px; }
  body.fl-page .fl-hero-title { font-size: 22px; line-height: 1.45; }
  body.fl-page .fl-hero-author { font-size: 13px; gap: 8px; }
  body.fl-page .fl-latest-grid { grid-template-columns: 1fr; gap: 48px; }
  body.fl-page .fl-footer-grid { grid-template-columns: 1fr; gap: 36px; }
  body.fl-page .fl-footer-meta { flex-direction: column; gap: 8px; }
  body.fl-page .fl-article-hero { padding: 64px 0 20px; }
  body.fl-page .fl-article-body-wrap { padding: 28px 0 64px; }
  body.fl-page .fl-article-hero-meta { padding: 28px 0 36px; }
  body.fl-page .fl-article-cat {
    gap: 12px;
    font-size: 10px;
    letter-spacing: 0.22em;
    margin-bottom: 26px;
  }
  body.fl-page .fl-article-cat::before,
  body.fl-page .fl-article-cat::after {
    width: 24px;
  }
  body.fl-page .fl-article-title-main {
    font-size: clamp(22px, 6.6vw, 28px);
    line-height: 1.25;
    letter-spacing: 0;
    max-width: 100%;
  }
  body.fl-page .fl-article-hero-author {
    margin-top: 26px;
  }
  body.fl-page .fl-article-hero-author .fl-name {
    font-size: 18px;
    margin-bottom: 6px;
  }
  body.fl-page .fl-article-hero-author .fl-article-hero-role {
    font-size: 13px;
    line-height: 1.7;
    letter-spacing: 0;
    color: #475569;
  }
  body.fl-page .fl-article-hero-author .fl-name + .fl-article-hero-role::before {
    content: "";
    margin: 0;
  }
  body.fl-page .fl-article-hero-date {
    margin-top: 28px;
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 0.06em;
  }
  body.fl-page .fl-article-hero-date > .fl-date,
  body.fl-page .fl-article-hero-date > .fl-interview-by,
  body.fl-page .fl-article-hero-date > .fl-interviewer-role {
    display: block;
  }
  body.fl-page .fl-article-hero-date > .fl-interview-by {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
  }
  body.fl-page .fl-article-hero-date .fl-date + .fl-interview-by::before { content: ""; }
  body.fl-page .fl-article-hero-date .fl-interview-by + .fl-interviewer-role::before { content: ""; }
  body.fl-page .fl-article-hero-date .fl-interviewer-role::after { content: ""; }
  /* Stacked role segments on narrow viewports, everywhere a credit line is rendered. */
  body.fl-page .fl-role-segments,
  body.fl-page .fl-role-segments > span { display: block; }
  body.fl-page .fl-role-segments > span + span::before { content: ""; margin: 0; }
  body.fl-page .fl-article-hero-img {
    aspect-ratio: 4/3;
    border-radius: 8px;
  }
  body.fl-page .fl-article-body p {
    font-size: 15px;
    letter-spacing: 0;
  }
  /* Force the article column structure on SP. Each wrapper takes the
     full available width with predictable padding so children align to
     the same x on both sides — real-device WebKit otherwise inherits
     stray paddings (e.g. from .wp-block-* defaults) that don't show on
     desktop mobile emulation. */
  body.fl-page .fl-article-body-wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
  }
  body.fl-page .fl-article-body {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline: 0 !important;
    padding-left: var(--fl-gutter) !important;
    padding-right: var(--fl-gutter) !important;
    padding-inline: var(--fl-gutter) !important;
    box-sizing: border-box !important;
  }
  body.fl-page .fl-article-content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
  }
  /* Cocoon/WP block styles can use either physical or logical inline
     spacing. Reset both on phones so text, headings, and figures share
     the same content column on real iOS WebKit. */
  body.fl-page .fl-article-content > p,
  body.fl-page .fl-article-content > h1,
  body.fl-page .fl-article-content > h2,
  body.fl-page .fl-article-content > h3,
  body.fl-page .fl-article-content > h4,
  body.fl-page .fl-article-content > h5,
  body.fl-page .fl-article-content > h6,
  body.fl-page .fl-article-content > ul,
  body.fl-page .fl-article-content > ol,
  body.fl-page .fl-article-content > blockquote,
  body.fl-page .fl-article-content > figure,
  body.fl-page .fl-article-content > .wp-block-image,
  body.fl-page .fl-article-body > p,
  body.fl-page .fl-article-body > h2,
  body.fl-page .fl-article-body > h3,
  body.fl-page .fl-mission-body > h2,
  body.fl-page .fl-mission-body > p,
  body.fl-page .fl-company-body > p,
  body.fl-page .fl-company-body > dl {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline: 0 !important;
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  body.fl-page .fl-article-content > figure img,
  body.fl-page .fl-article-content > .wp-block-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  body.fl-page .fl-article-body h2 { font-size: 19px; }
  body.fl-page .fl-pullquote { margin: 40px -24px; padding: 32px 24px; }
  body.fl-page .fl-pullquote q { font-size: 17px; }
  /* Drop the inset box on phones — its 24px inner padding made aside
     content read narrower than the body paragraphs around it. Keep the
     navy accent line on the left, give a symmetric right padding so the
     bio text doesn't run all the way to the right gutter. */
  body.fl-page .fl-author-bio {
    grid-template-columns: 1fr;
    padding: 20px 16px;
    background: transparent;
    box-shadow: inset 3px 0 0 var(--ink);
  }
  body.fl-page .fl-author-bio.fl-bio-bottom {
    box-shadow: inset 3px 0 0 var(--mutedlight);
  }
  body.fl-page .fl-next-grid { grid-template-columns: 1fr; gap: 32px; }
  body.fl-page.admin-bar .fl-site-header { top: 46px; }
}
@media (max-width: 480px) {
  body.fl-page .fl-brand { font-size: 17px; }
  body.fl-page .fl-header-pm-logo {
    height: 22px !important;
    max-width: 120px !important;
  }
  body.fl-page .fl-nav { gap: 10px; }
  body.fl-page .fl-lang { padding-left: 8px; font-size: 10px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  body.fl-page .fl-latest-grid { grid-template-columns: repeat(2, 1fr); }
}