:root {
  --founder-navy: #071f3f;
  --founder-blue: #1f5f9b;
  --founder-line: rgba(97, 132, 177, .24);
  --founder-ink: #172033;
  --founder-copy: #334b63;
  --founder-muted: #61748a;
  --founder-paper: #eef4ff;
  --founder-shell: min(1120px, calc(100% - 40px));
  --founder-measure: 740px;
  color: var(--founder-ink);
  background: var(--founder-paper);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  background:
    radial-gradient(circle at 12% 9%, rgba(255, 255, 255, .18) 0 7%, transparent 25%),
    radial-gradient(circle at 90% 36%, rgba(173, 207, 255, .2) 0 9%, transparent 28%),
    linear-gradient(145deg, #edf4ff 0%, var(--founder-paper) 52%, #e9f2ff 100%);
}
a { color: inherit; }
a:focus-visible, [tabindex="-1"]:focus-visible { outline: 3px solid var(--founder-blue); outline-offset: 4px; }

.founder-skip-link { position: fixed; z-index: 10; top: 12px; left: 12px; padding: 10px 14px; color: #fff; background: var(--founder-navy); transform: translateY(-160%); }
.founder-skip-link:focus { transform: translateY(0); }
.founder-header, .founder-footer { width: var(--founder-shell); display: flex; align-items: center; margin: 0 auto; }
.founder-header { min-height: 70px; justify-content: flex-end; }
.founder-header nav { display: flex; align-items: center; gap: 10px; color: #7890aa; font-size: .78rem; font-weight: 750; letter-spacing: .08em; }
.founder-header nav a { color: var(--founder-copy); text-decoration: none; }
.founder-header nav a[aria-current="page"] { color: var(--founder-navy); }
.founder-header nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.founder-main { width: var(--founder-shell); margin: 0 auto; }
.founder-article { max-width: 1040px; margin: 0 auto; }
.founder-article-header {
  display: grid;
  grid-template: "title photo" auto "intro photo" 1fr / minmax(0, 1fr) minmax(280px, 320px);
  column-gap: clamp(42px, 6vw, 68px);
  padding: clamp(36px, 5vw, 62px) 0 clamp(52px, 7vw, 78px);
  border-bottom: 1px solid var(--founder-line);
}
.founder-title-block { grid-area: title; align-self: end; }
.founder-introduction { grid-area: intro; }
.founder-photo { grid-area: photo; align-self: center; width: 100%; margin: 0; }
.founder-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center bottom;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 4%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 4%, #000 95%, transparent 100%);
  mask-composite: intersect;
}
.founder-kicker { margin: 0 0 14px; color: var(--founder-muted); font-size: .9rem; font-weight: 700; line-height: 1.5; }
.founder-article-header h1 { margin: 0; color: var(--founder-navy); font-size: clamp(2.65rem, 6vw, 4.15rem); font-weight: 800; letter-spacing: -.05em; line-height: .98; text-wrap: balance; }
.founder-name-ja { display: block; margin-top: .32em; color: #405a78; font-family: "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif; font-size: .38em; font-weight: 700; letter-spacing: 0; line-height: 1.25; }
.founder-roles { margin: 20px 0 0; color: var(--founder-navy); font-size: 1rem; font-weight: 700; line-height: 1.55; }
.founder-intro { margin: 24px 0 0; color: #2c4056; font-size: clamp(1.12rem, 2vw, 1.25rem); line-height: 1.67; }
.founder-body { max-width: var(--founder-measure); margin: 0; padding-bottom: clamp(72px, 9vw, 112px); }
.founder-section { padding: clamp(42px, 6vw, 64px) 0; border-bottom: 1px solid var(--founder-line); }
.founder-section h2, .founder-record h2 { margin: 0; color: var(--founder-navy); font-size: clamp(1.55rem, 3vw, 2rem); font-weight: 780; letter-spacing: -.025em; line-height: 1.2; text-wrap: balance; }
.founder-section p, .founder-record-heading > p { margin: 20px 0 0; color: var(--founder-copy); font-size: 1.04rem; line-height: 1.78; }
.founder-section p + p { margin-top: 18px; }
.founder-section-sources { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 24px 0 0; list-style: none; }
.founder-section-sources a { color: var(--founder-blue); font-size: .84rem; font-weight: 650; line-height: 1.5; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.founder-record { padding-top: clamp(52px, 7vw, 76px); }
.founder-record-heading { max-width: 680px; }
.founder-source-list { padding: 0; margin: 34px 0 0; list-style: none; }
.founder-source-item { padding: 20px 0; border-top: 1px solid var(--founder-line); }
.founder-source-item:last-child { border-bottom: 1px solid var(--founder-line); }
.founder-source-item a { color: var(--founder-navy); font-size: .98rem; font-weight: 700; line-height: 1.45; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.founder-source-item a:hover { color: var(--founder-blue); }
.founder-external { margin-left: .18em; color: var(--founder-blue); }
.founder-source-item p { display: flex; flex-wrap: wrap; gap: 0 .5em; margin: 7px 0 0; color: var(--founder-muted); font-size: .84rem; line-height: 1.55; }
.founder-source-kind { color: #526a83; font-weight: 650; }
.founder-source-date::before, .founder-source-description::before { margin-right: .5em; color: #9aabbd; content: "·"; }
.founder-footer { min-height: 90px; justify-content: flex-start; border-top: 1px solid var(--founder-line); color: var(--founder-muted); font-size: .84rem; }

@media (min-width: 721px) {
  .founder-article-header { grid-template-areas: "title ." "intro photo"; }
  .founder-photo {
    position: relative;
    align-self: stretch;
    max-height: 320px;
    margin: 24px 0 1lh;
    font-size: clamp(1.12rem, 2vw, 1.25rem);
    line-height: 1.67;
  }
  .founder-photo img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
}

@media (max-width: 720px) {
  :root { --founder-shell: min(100% - 36px, 560px); }
  .founder-header { min-height: 68px; }
  .founder-article-header { grid-template-columns: minmax(0, 1fr) 190px; column-gap: 32px; padding-top: 38px; }
  .founder-section { padding: 44px 0; }
  .founder-section p, .founder-record-heading > p { font-size: 1rem; line-height: 1.74; }
  .founder-footer { min-height: 78px; }
}

@media (max-width: 620px) {
  .founder-article-header { display: block; padding-top: 30px; }
  .founder-photo { width: 100%; margin: 32px 0 0; }
}

@media (max-width: 430px) {
  :root { --founder-shell: calc(100% - 32px); }
  .founder-article-header h1 { font-size: clamp(2.45rem, 12vw, 3.15rem); }
  .founder-intro { font-size: 1.08rem; }
  .founder-source-item p { display: block; }
  .founder-source-kind, .founder-source-date, .founder-source-description { display: block; }
  .founder-source-date::before, .founder-source-description::before { content: none; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.ipn-letter-header { display: block; max-width: var(--founder-measure); border-bottom: 0; padding-bottom: 0; }
.ipn-letter-header h1 a { text-decoration: none; }
.ipn-letter-header h1 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.ipn-mobile-letter-title { display: none; }
.ipn-letter { position: relative; padding-top: 24px; }
.ipn-letter > p:first-child { margin-top: 0; }
.ipn-letter::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 140px; height: 1px; background: linear-gradient(90deg, transparent, #6b9cd2, transparent); }
.ipn-letter ul { padding-left: 1.3em; margin: 22px 0; color: var(--founder-copy); font-size: 1.04rem; line-height: 1.78; }
.ipn-letter li { padding-left: .25em; margin: 8px 0; }
.ipn-letter li::marker { color: var(--founder-blue); }
@media (max-width: 720px) {
  .ipn-letter ul { font-size: 1rem; line-height: 1.74; }
  .ipn-desktop-roles { display: none; }
  .ipn-mobile-letter-title { display: inline; }
}
@media (prefers-reduced-motion: no-preference) {
  .ipn-letter::after { animation: ipn-letter-line 8.4s ease-in-out infinite; }
  @keyframes ipn-letter-line { 0%, 100% { transform: translateX(0); opacity: .4; } 50% { transform: translateX(80px); opacity: 1; } }
}