/* ============================================================
   一般社団法人ルール形成戦略機構 — Corporate Site
   Type system: Shippori Mincho (JP headings) / Noto Sans JP (body)
                Inter (Latin labels & display)
   ============================================================ */

:root {
  --ink: #16181a;
  --ink-soft: #33373b;
  --muted: #71757a;
  --paper: #f7f6f3;
  --white: #ffffff;
  --hairline: #e2e0da;
  --hairline-dark: rgba(255, 255, 255, 0.16);
  --night: #101317;
  --night-2: #171c22;
  --accent: #2c4a68;

  --serif: 'Shippori Mincho', 'Hiragino Mincho ProN', serif;
  --sans: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --latin: 'Inter', 'Helvetica Neue', sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pad: clamp(24px, 5vw, 72px);
  --max: 1360px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

::selection { background: var(--ink); color: var(--paper); }

/* ---------- type utilities ---------- */

.serif { font-family: var(--serif); }
.latin {
  font-family: var(--latin);
  letter-spacing: 0.02em;
  font-feature-settings: normal;
}

.label {
  font-family: var(--latin);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.label::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.label--bare::before { display: none; }

/* Big Latin display, à la "News" */
.display {
  font-family: var(--latin);
  font-weight: 300;
  font-size: clamp(34px, 4.2vw, 58px);
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
}

.jp-heading {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.9;
  letter-spacing: 0.08em;
}

/* ---------- layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.section { padding: clamp(96px, 12vw, 176px) 0; }

/* two-column: sticky label left / content right (Mitsui-style) */
.split {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(0, 2.6fr);
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
}
.split__head { position: sticky; top: 120px; }
.split__head .display { margin-bottom: 20px; }
.split__head .split__jp {
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--muted);
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 48px; }
  .split__head { position: static; }
}

/* ---------- header ---------- */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease),
              transform 0.6s var(--ease);
}
.header.is-away { transform: translateY(-100%); }
body.menu-open .header.is-away { transform: none; }
.header__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: height 0.5s var(--ease);
}
.header.is-solid {
  background: rgba(247, 246, 243, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--hairline);
}
.header.is-solid .header__inner { height: 68px; }

.brand { display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.brand__jp {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.12em;
}
.brand__en {
  font-family: var(--latin);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); }
.nav a {
  font-family: var(--latin);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  position: relative;
  padding: 6px 0;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--ink);
  transition: right 0.45s var(--ease);
}
.nav a:hover::after, .nav a.is-current::after { right: 0; }

.nav .nav__cta {
  border: 1px solid var(--ink);
  padding: 10px 22px;
  transition: background 0.45s var(--ease), color 0.45s var(--ease);
}
.nav .nav__cta::after { display: none; }
.nav .nav__cta:hover { background: var(--ink); color: var(--paper); }

/* mobile menu */
.menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 44px; height: 44px;
  position: relative;
  z-index: 120;
}
.menu-btn span {
  position: absolute;
  left: 10px; right: 10px;
  height: 1px;
  background: var(--ink);
  transition: transform 0.45s var(--ease), top 0.45s var(--ease), opacity 0.3s;
}
.menu-btn span:nth-child(1) { top: 17px; }
.menu-btn span:nth-child(2) { top: 26px; }
body.menu-open .menu-btn span:nth-child(1) { top: 22px; transform: rotate(25deg); }
body.menu-open .menu-btn span:nth-child(2) { top: 22px; transform: rotate(-25deg); }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 90; /* below .header so the brand and close button stay visible */
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--pad);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}
body.menu-open .mobile-nav { opacity: 1; visibility: visible; }
.mobile-nav a {
  font-family: var(--latin);
  font-weight: 300;
  font-size: 34px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.mobile-nav a small {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.14em;
}

@media (max-width: 900px) {
  .nav { display: none; }
  .menu-btn { display: block; }
  .hero__lead br { display: none; }
}
body.menu-open .header { background: none; box-shadow: none; backdrop-filter: none; }

/* ---------- hero ---------- */

.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding-top: 88px;
}

.hero__label { margin-bottom: clamp(28px, 4vh, 48px); }

.hero__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(34px, 5.4vw, 74px);
  line-height: 1.65;
  letter-spacing: 0.1em;
}

.hero__lead {
  margin-top: clamp(32px, 5vh, 56px);
  max-width: 560px;
  font-size: 14px;
  line-height: 2.4;
  color: var(--ink-soft);
}

/* line-by-line reveal (hidden states only when JS is available) */
.line-reveal .line { display: block; overflow: hidden; }
.line-reveal .line > span {
  display: block;
  transition: transform 1.3s var(--ease);
}
html.js .line-reveal .line > span { transform: translateY(110%); }
.line-reveal.is-in .line > span { transform: translateY(0); }
.line-reveal .line:nth-child(2) > span { transition-delay: 0.12s; }
.line-reveal .line:nth-child(3) > span { transition-delay: 0.24s; }

/* horizon line art */
.hero__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero__art svg { width: 100%; height: 100%; }

.hero__scroll {
  position: absolute;
  bottom: 0;
  right: var(--pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-family: var(--latin);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--muted);
  writing-mode: vertical-rl;
}
.hero__scroll::after {
  content: "";
  width: 1px;
  height: 72px;
  background: linear-gradient(to bottom, var(--muted), transparent);
  animation: scrollhint 2.6s var(--ease) infinite;
  transform-origin: top;
}
@keyframes scrollhint {
  0% { transform: scaleY(0); }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- reveal on scroll ---------- */

.reveal {
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  transition-delay: var(--d, 0s);
}
html.js .reveal {
  opacity: 0;
  transform: translateY(28px);
}
html.js .reveal.is-in { opacity: 1; transform: none; }

.reveal-line {
  transform-origin: left;
  transition: transform 1.4s var(--ease);
  transition-delay: var(--d, 0s);
}
html.js .reveal-line { transform: scaleX(0); }
html.js .reveal-line.is-in { transform: scaleX(1); }

/* ---------- page transition ---------- */
html.js body { opacity: 0; }
html.js body.is-ready { opacity: 1; transition: opacity 0.55s ease; }
html.js body.is-leaving { opacity: 0; transition: opacity 0.28s ease; }

/* When GSAP drives the motion, CSS transitions must not compete */
html.gsap .reveal,
html.gsap .reveal-line,
html.gsap .line-reveal .line > span {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-line, .line-reveal .line > span {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- statement ---------- */

.statement { background: var(--white); }
.statement__body {
  max-width: 720px;
  font-size: 15px;
  line-height: 2.5;
  color: var(--ink-soft);
}
.statement__body p + p { margin-top: 2em; }
.statement .jp-heading { margin-bottom: clamp(40px, 5vw, 64px); }

/* ---------- dark concept band (Horizon 2100) ---------- */

.band {
  position: relative;
  background: var(--night);
  color: rgba(255, 255, 255, 0.88);
  overflow: hidden;
}
.band .label { color: rgba(255, 255, 255, 0.55); }
.band__inner {
  position: relative;
  z-index: 1;
  padding-top: clamp(120px, 15vw, 220px);
  padding-bottom: clamp(120px, 15vw, 220px);
}
.band__title {
  font-family: var(--latin);
  font-weight: 200;
  font-size: clamp(48px, 8vw, 120px);
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: var(--white);
  margin: 28px 0 40px;
}
.band__lead {
  max-width: 640px;
  font-size: 14.5px;
  line-height: 2.5;
  color: rgba(255, 255, 255, 0.72);
}
.band__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.band__art svg { width: 100%; height: 100%; }
.band .btn-line { color: var(--white); border-color: rgba(255,255,255,0.4); margin-top: 56px; }
.band .btn-line:hover { border-color: var(--white); }

/* ---------- buttons / links ---------- */

.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--latin);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
  transition: border-color 0.45s var(--ease), gap 0.45s var(--ease);
}
.btn-line:hover { border-color: var(--ink); gap: 24px; }
.btn-line .arrow { transition: transform 0.45s var(--ease); }

/* circled arrow — All News style */
.more-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: var(--latin);
  font-weight: 300;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: 0.01em;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ink);
}
.more-link .circle {
  width: 40px;
  height: 40px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background 0.45s var(--ease);
}
.more-link .circle svg { width: 13px; height: 13px; stroke: var(--ink); transition: stroke 0.45s var(--ease), transform 0.45s var(--ease); }
.more-link:hover .circle { background: var(--ink); }
.more-link:hover .circle svg { stroke: var(--paper); transform: translateX(2px); }

.section__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(56px, 7vw, 96px);
}

/* ---------- activities grid (full-bleed 2x2) ---------- */

.acts { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.acts__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.act {
  position: relative;
  padding: clamp(48px, 5.5vw, 88px) var(--pad);
  min-height: clamp(320px, 44vh, 460px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--paper);
  transition: background 0.6s var(--ease), color 0.6s var(--ease);
  overflow: hidden;
}
.act:nth-child(2n) { border-right: none; }
.act:nth-child(n+3) { border-bottom: none; }

.act__no {
  font-family: var(--latin);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--muted);
  transition: color 0.6s var(--ease);
}
.act__en {
  font-family: var(--latin);
  font-weight: 300;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: 0;
  margin: 18px 0 6px;
}
.act__jp {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--muted);
  transition: color 0.6s var(--ease);
}
.act__desc {
  margin-top: 32px;
  font-size: 13.5px;
  line-height: 2.2;
  color: var(--ink-soft);
  max-width: 480px;
  transition: color 0.6s var(--ease);
}
.act__arrow {
  position: absolute;
  right: var(--pad);
  bottom: clamp(40px, 4.5vw, 72px);
  width: 40px; height: 40px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: border-color 0.6s var(--ease), transform 0.6s var(--ease);
}
.act__arrow svg { width: 13px; height: 13px; stroke: currentColor; }

.act:hover { background: var(--night); color: var(--white); }
.act:hover .act__no, .act:hover .act__jp { color: rgba(255,255,255,0.55); }
.act:hover .act__desc { color: rgba(255,255,255,0.75); }
.act:hover .act__arrow { border-color: rgba(255,255,255,0.4); transform: translateX(4px); }

@media (max-width: 900px) {
  .acts__grid { grid-template-columns: 1fr; }
  .act { border-right: none !important; border-bottom: 1px solid var(--hairline) !important; min-height: 0; }
  .act:last-child { border-bottom: none !important; }
}

/* ---------- insights cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
}
@media (max-width: 1000px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .cards { grid-template-columns: 1fr; } }

.card { display: block; }
.card__thumb {
  aspect-ratio: 4 / 3;
  background: var(--night);
  position: relative;
  overflow: hidden;
  margin-bottom: 22px;
}
.card__thumb svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  transition: transform 1.2s var(--ease);
}
.card:hover .card__thumb svg { transform: scale(1.06); }

.card__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.card__date {
  font-family: var(--latin);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.tag {
  font-family: var(--latin);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: #edebe5;
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.tag::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}
.card__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 16.5px;
  line-height: 1.9;
  letter-spacing: 0.05em;
  transition: opacity 0.4s;
}
.card:hover .card__title { opacity: 0.6; }

/* ---------- news list (Mitsui tone) ---------- */

.news-filters {
  display: inline-flex;
  background: #edebe5;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.news-filters button {
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  padding: 10px 26px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-soft);
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.news-filters button.is-active { background: var(--ink); color: var(--paper); }

.news-list { border-top: 1px solid var(--hairline); }
.news-item {
  display: grid;
  grid-template-columns: 110px 140px 1fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: baseline;
  padding: 34px 0;
  border-bottom: 1px solid var(--hairline);
  transition: opacity 0.4s;
}
a.news-item:hover { opacity: 0.55; }
.news-item__date {
  font-family: var(--latin);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.news-item__title {
  font-size: 14.5px;
  letter-spacing: 0.06em;
  font-weight: 400;
}
.news-item.is-hidden { display: none; }

@media (max-width: 700px) {
  .news-item { grid-template-columns: 1fr; gap: 8px; padding: 26px 0; }
}

/* ---------- org / recruit split panels ---------- */

.duo { display: grid; grid-template-columns: 1fr 1fr; }
.duo__panel {
  position: relative;
  min-height: clamp(360px, 52vh, 560px);
  padding: clamp(48px, 6vw, 96px) var(--pad);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.duo__panel--dark { background: var(--night-2); color: var(--white); }
.duo__panel--light { background: #e9e7e0; color: var(--ink); }
.duo__panel .display { font-size: clamp(30px, 3.4vw, 48px); color: currentColor; margin-bottom: 14px; }
.duo__panel p { font-size: 13px; letter-spacing: 0.1em; opacity: 0.7; margin-bottom: 36px; }
.duo__panel .btn-line { color: currentColor; border-color: currentColor; opacity: 0.85; }
.duo__art { position: absolute; inset: 0; pointer-events: none; }
.duo__art svg { width: 100%; height: 100%; transition: transform 1.4s var(--ease); }
.duo__panel:hover .duo__art svg { transform: scale(1.04); }

@media (max-width: 900px) { .duo { grid-template-columns: 1fr; } }

/* ---------- contact cta ---------- */

.cta { background: var(--white); text-align: center; }
.cta .jp-heading { margin: 24px 0 40px; }
.cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-family: var(--latin);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  padding: 22px 72px;
  transition: background 0.5s var(--ease), color 0.5s var(--ease);
}
.cta__btn:hover { background: var(--ink); color: var(--paper); }

/* ---------- footer ---------- */

.footer {
  background: var(--night);
  color: rgba(255, 255, 255, 0.75);
  padding: clamp(72px, 9vw, 120px) 0 48px;
  font-size: 13px;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  padding-bottom: clamp(56px, 7vw, 88px);
  border-bottom: 1px solid var(--hairline-dark);
}
.footer .brand__jp { color: var(--white); }
.footer .brand__en { color: rgba(255,255,255,0.45); }
.footer__addr { margin-top: 24px; font-size: 12px; line-height: 2.2; color: rgba(255,255,255,0.5); }
.footer__col h4 {
  font-family: var(--latin);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 20px;
}
.footer__col li { margin-bottom: 12px; }
.footer__col a {
  font-size: 13px;
  letter-spacing: 0.08em;
  transition: color 0.35s;
}
.footer__col a:hover { color: var(--white); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 40px;
  font-family: var(--latin);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.4);
}
@media (max-width: 800px) { .footer__top { grid-template-columns: 1fr; } }

/* ---------- sub pages ---------- */

.page-hero {
  padding: clamp(160px, 22vh, 240px) 0 clamp(64px, 8vw, 112px);
  border-bottom: 1px solid var(--hairline);
}
.page-hero .display { margin: 24px 0 12px; }
.page-hero__jp { font-size: 13px; letter-spacing: 0.16em; color: var(--muted); }

.prose {
  max-width: 720px;
  font-size: 15px;
  line-height: 2.5;
  color: var(--ink-soft);
}
.prose p + p { margin-top: 2em; }
.prose .jp-heading { color: var(--ink); margin-bottom: clamp(32px, 4vw, 56px); }

/* alternating philosophy rows */
.ph-row {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(0, 2.2fr);
  gap: clamp(40px, 6vw, 120px);
  padding: clamp(72px, 9vw, 128px) 0;
  border-top: 1px solid var(--hairline);
}
.ph-row:first-child { border-top: none; }
.ph-row__head .latin-title {
  font-family: var(--latin);
  font-weight: 300;
  font-size: clamp(26px, 2.8vw, 40px);
  margin-bottom: 10px;
}
.ph-row__head .jp {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.ph-row .jp-heading { font-size: clamp(20px, 2.1vw, 28px); margin-bottom: 32px; }
@media (max-width: 900px) {
  .ph-row { grid-template-columns: 1fr; gap: 32px; }
}

/* creed dark poem */
.creed { text-align: center; }
.creed__poem {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 2.4;
  letter-spacing: 0.14em;
  color: var(--white);
  margin-bottom: clamp(48px, 6vw, 72px);
}
.creed__body {
  max-width: 640px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 2.6;
  color: rgba(255,255,255,0.7);
  text-align: left;
}

/* principles grid */
.pr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.pr-cell {
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 44px);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  transition: background 0.5s var(--ease);
}
.pr-cell:hover { background: var(--white); }
.pr-cell__no {
  font-family: var(--latin);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-bottom: 28px;
}
.pr-cell__en {
  font-family: var(--latin);
  font-weight: 400;
  font-size: 21px;
  margin-bottom: 4px;
}
.pr-cell__jp {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 22px;
}
.pr-cell__desc { font-size: 13px; line-height: 2.2; color: var(--ink-soft); margin-top: auto; }
@media (max-width: 1000px) { .pr-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .pr-grid { grid-template-columns: 1fr; } }

/* framework rows */
.fw-list { border-top: 1px solid var(--hairline); }
.fw-row {
  display: grid;
  grid-template-columns: 90px 260px 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: baseline;
  padding: clamp(36px, 4vw, 52px) 0;
  border-bottom: 1px solid var(--hairline);
}
.fw-row__no {
  font-family: var(--latin);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.fw-row__name .en {
  font-family: var(--latin);
  font-weight: 400;
  font-size: 22px;
  display: block;
}
.fw-row__name .jp {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.fw-row__desc { font-size: 13.5px; line-height: 2.2; color: var(--ink-soft); }
@media (max-width: 800px) {
  .fw-row { grid-template-columns: 1fr; gap: 10px; }
}

/* activities page rows */
.act-row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 1.8fr);
  gap: clamp(40px, 6vw, 120px);
  padding: clamp(64px, 8vw, 112px) 0;
  border-top: 1px solid var(--hairline);
}
.act-row__no {
  font-family: var(--latin);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-bottom: 20px;
}
.act-row__en {
  font-family: var(--latin);
  font-weight: 300;
  font-size: clamp(30px, 3.2vw, 46px);
}
.act-row__jp { font-size: 12.5px; letter-spacing: 0.16em; color: var(--muted); margin-top: 6px; }
.act-row__desc { font-size: 14.5px; line-height: 2.5; color: var(--ink-soft); }
@media (max-width: 900px) { .act-row { grid-template-columns: 1fr; gap: 28px; } }

/* organization page */
.dl-table { border-top: 1px solid var(--hairline); max-width: 880px; }
.dl-table > div {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--hairline);
}
.dl-table dt { font-size: 13px; letter-spacing: 0.12em; color: var(--muted); }
.dl-table dd { font-size: 14px; letter-spacing: 0.06em; }
@media (max-width: 640px) {
  .dl-table > div { grid-template-columns: 1fr; gap: 6px; }
}

.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(32px, 4vw, 64px);
}
.member__photo {
  aspect-ratio: 3 / 3.6;
  background: linear-gradient(160deg, #e6e4dd, #d6d4cc);
  margin-bottom: 20px;
  display: grid;
  place-items: center;
}
.member__photo span {
  font-family: var(--latin);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}
.member__role { font-size: 11px; letter-spacing: 0.18em; color: var(--muted); margin-bottom: 8px; }
.member__name { font-family: var(--serif); font-weight: 600; font-size: 20px; letter-spacing: 0.1em; }
.member__en { font-family: var(--latin); font-size: 11px; letter-spacing: 0.14em; color: var(--muted); margin-top: 4px; }

/* contact page */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(48px, 7vw, 120px);
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.form label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 10px;
}
.form .field { margin-bottom: 36px; }
.form input, .form textarea, .form select {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: 0.06em;
  padding: 10px 2px 14px;
  color: var(--ink);
  transition: border-color 0.4s var(--ease);
  border-radius: 0;
}
.form input:focus, .form textarea:focus, .form select:focus {
  outline: none;
  border-color: var(--ink);
}
.form textarea { min-height: 140px; resize: vertical; }

/* insights page filters reuse news-filters */

.pagenote {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-top: clamp(40px, 5vw, 64px);
}