/* ================================================================
   七丈研究室 — Academic Editorial
   Palette: cool paper / deep ink navy / ginkgo accent (国立・大学通りの銀杏)
     --accent is for marks only (rules, dots, bars); text uses --accent-ink for contrast.
   Type: Mincho (serif) display + Gothic (sans) body
================================================================ */
:root{
  --paper:      #F6F7F5;
  --paper-2:    #ECEEEA;
  --ink:        #17233B;
  --ink-soft:   #4A5468;
  --accent:     #C99A0E;
  --accent-ink: #7C5C00;
  --hairline:   rgba(23,35,59,.2);
  --hairline-2: rgba(23,35,59,.1);
  --footer-bg:  #17233B;
  --footer-ink: #ECEEEA;
  --footer-dim: rgba(236,238,234,.66);
  --serif: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", "Noto Serif JP", "Times New Roman", serif;
  --sans: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", "Menlo", "Consolas", monospace;
  --z-header: 50;
  --header-h: 66px;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:      #121826;
    --paper-2:    #0D121D;
    --ink:        #E9ECEF;
    --ink-soft:   #A7AEBB;
    --accent:     #E2B53A;
    --accent-ink: #E9C25A;
    --hairline:   rgba(233,236,239,.24);
    --hairline-2: rgba(233,236,239,.12);
    --footer-bg:  #0A0F19;
    --footer-ink: #E9ECEF;
    --footer-dim: rgba(233,236,239,.6);
  }
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.85;
  font-size:15.5px;
  letter-spacing:.02em;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
img,svg{ max-width:100%; display:block; }
h1,h2,h3,h4{ word-break:auto-phrase; text-wrap:balance; }
p,li{ text-wrap:pretty; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

.wrap{
  max-width:1180px; margin-inline:auto;
  padding-inline:max(clamp(20px, 4vw, 48px), env(safe-area-inset-left), env(safe-area-inset-right));
}

/* ---------- Small labels (sentence case; only where they carry information) ---------- */
.label, .kicker{
  font-family:var(--sans);
  font-size:.8rem;
  letter-spacing:.04em;
  color:var(--accent-ink);
  font-weight:600;
}
.kicker{ display:block; margin-bottom:10px; }

/* ================= Header ================= */
.site-header{
  position:sticky; top:0; z-index:var(--z-header);
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--header-h); gap:24px;
}
.logo{
  font-family:var(--serif);
  font-size:1.28rem; font-weight:600; letter-spacing:.14em;
  display:flex; align-items:baseline; gap:.7em;
}
.logo .logo-en{
  font-family:var(--sans); font-size:.72rem; letter-spacing:.06em;
  color:var(--ink-soft); font-weight:500;
}
nav.primary{ display:flex; align-items:center; gap:4px; }
.nav-group{ position:relative; }
.nav-group > button{
  font-family:var(--sans); font-size:.82rem; letter-spacing:.08em;
  background:none; border:0; color:var(--ink); cursor:pointer;
  padding:10px 14px; display:flex; align-items:center; gap:6px;
}
.nav-group > button::after{
  content:""; width:6px; height:6px;
  border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translateY(-2px); opacity:.55;
  transition:transform .2s ease-out;
}
.nav-group:hover > button::after,
.nav-group:focus-within > button::after{ transform:rotate(225deg) translateY(-1px); }
.dropdown{
  position:absolute; top:calc(100% + 10px); left:8px; min-width:230px;
  background:var(--paper); border:1px solid var(--hairline);
  padding:10px 0;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease-out, transform .18s ease-out, visibility .18s;
  box-shadow:0 14px 34px rgba(10,16,30,.12);
}
.dropdown::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }
.nav-group:hover .dropdown,
.nav-group:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-group.dismissed .dropdown{ opacity:0; visibility:hidden; transform:translateY(-6px); }
.dropdown a{
  display:block; padding:8px 20px; font-size:.82rem; letter-spacing:.06em;
  border-left:2px solid transparent;
  transition:border-color .15s ease-out, color .15s ease-out, background-color .15s ease-out;
}
.dropdown a:hover, .dropdown a.active{ border-left-color:var(--accent); color:var(--accent-ink); background:var(--paper-2); }
.lang-toggle{
  font-size:.72rem; letter-spacing:.14em; color:var(--ink-soft);
  border:1px solid var(--hairline); padding:6px 14px; white-space:nowrap;
  cursor:pointer; background:none; font-family:var(--sans);
}
.lang-toggle strong{ color:var(--ink); font-weight:600; }

/* mobile menu */
.menu-btn{
  display:none; background:none; border:1px solid var(--hairline);
  width:42px; height:42px; cursor:pointer; position:relative;
}
.menu-btn span, .menu-btn span::before, .menu-btn span::after{
  content:""; position:absolute; left:11px; right:11px; height:1.5px;
  background:var(--ink); transition:transform .2s ease-out, opacity .2s ease-out;
}
.menu-btn span{ top:50%; }
.menu-btn span::before{ top:-6px; left:0; right:0; }
.menu-btn span::after{ top:6px; left:0; right:0; }
body.menu-open .menu-btn span{ background:transparent; }
body.menu-open .menu-btn span::before{ transform:translateY(6px) rotate(45deg); }
body.menu-open .menu-btn span::after{ transform:translateY(-6px) rotate(-45deg); }
.mobile-nav{
  display:none;
  border-top:1px solid var(--hairline-2);
  background:var(--paper);
  padding:18px clamp(20px,4vw,48px) 30px;
}
body.menu-open .mobile-nav{
  display:block;
  max-height:calc(100dvh - var(--header-h)); overflow-y:auto; overscroll-behavior:contain;
  padding-bottom:max(30px, env(safe-area-inset-bottom));
}
.mobile-nav h3{
  font-size:.78rem; letter-spacing:.04em;
  color:var(--accent-ink); margin:20px 0 6px; font-weight:600;
}
.mobile-nav a{ display:block; padding:11px 0; font-size:.95rem; border-bottom:1px solid var(--hairline-2); }

@media (max-width: 880px){
  nav.primary{ display:none; }
  .menu-btn{ display:block; }
  .lang-toggle{ display:none; }
  .mobile-nav .lang-toggle{ display:inline-block; margin-top:22px; }
}

/* ================= Hero (homepage, split) ================= */
.hero{ position:relative; border-bottom:1px solid var(--hairline); overflow:hidden; }
.hero-grid{
  display:grid;
  grid-template-columns: minmax(0,7fr) minmax(0,5fr);
  gap:clamp(28px,5vw,72px);
  padding-block:clamp(64px,9vw,120px);
  align-items:center;
}
.hero h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.9rem, 4.6vw, 3.3rem);
  line-height:1.42; letter-spacing:.045em; margin-bottom:30px;
  text-wrap:balance;
}
.hero-sub{ color:var(--ink-soft); max-width:34em; margin-bottom:44px; font-size:clamp(.92rem, 1.4vw, 1rem); }
.cta-row{ display:flex; flex-wrap:wrap; gap:14px; }
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-size:.88rem; letter-spacing:.1em; font-weight:600;
  padding:15px 30px; border:1px solid var(--ink);
  transition:background-color .15s ease-out, color .15s ease-out, border-color .15s ease-out;
  cursor:pointer; background:none;
}
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--accent-ink); border-color:var(--accent-ink); color:var(--paper); }
.btn-ghost:hover{ background:var(--paper-2); }
.btn-sm{ padding:9px 18px; font-size:.78rem; }

/* Hero figure: the lab's own supply-chain network (generated from supply-chain/network_layout.json) */
.hero-figure{ margin:0; }
.hero-figure a{ display:block; }
.hero-figure img{ width:100%; height:auto; }
.hero-figure figcaption{
  margin-top:12px; padding-top:12px; border-top:1px solid var(--hairline-2);
  font-size:.8rem; line-height:1.7; color:var(--ink-soft);
}
.hero-figure figcaption a{ display:inline; color:var(--accent-ink); text-decoration:underline; text-underline-offset:.25em; }
@media (max-width: 880px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-figure{ max-width:420px; }
}
@media (max-width: 560px){
  .hero-sub{ margin-bottom:36px; }
  .cta-row{ flex-direction:column; }
  .cta-row .btn{ justify-content:space-between; }
}

/* ================= Page hero (interior pages, single column) ================= */
.page-hero{ position:relative; border-bottom:1px solid var(--hairline); }
.page-hero-inner{ padding-block:clamp(52px,7vw,88px); max-width:50em; }
.page-hero h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.7rem, 4vw, 2.7rem);
  line-height:1.5; letter-spacing:.045em; margin-bottom:18px;
  text-wrap:balance;
}
.page-hero-lead{ color:var(--ink-soft); font-size:clamp(.92rem,1.3vw,1rem); max-width:36em; }

/* ================= Section furniture ================= */
.section{ padding-block:clamp(64px,8vw,110px); }
.section + .section{ border-top:1px solid var(--hairline); }
h2.section-title{ margin-bottom:clamp(28px,4vw,48px); }
.section-intro{ color:var(--ink-soft); max-width:42em; margin-bottom:clamp(28px,4vw,48px); font-size:.94rem; }

h2.title-lg{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.5rem, 3vw, 2.15rem);
  line-height:1.55; letter-spacing:.05em; text-wrap:balance;
}
h3.title-md{
  font-family:var(--serif); font-weight:600;
  font-size:1.3rem; letter-spacing:.05em; line-height:1.6;
}

/* ================= Feature index (cards, homepage) ================= */
.features{ border-bottom:1px solid var(--hairline); }
.feature-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(28px,4vw,56px); }
.feature{ border-top:1px solid var(--hairline); padding-top:26px; position:relative; }
.feature-meta{ margin-bottom:18px; }
.feature-icon{ width:34px; height:34px; color:var(--ink); opacity:.9; }
.feature h3{ font-family:var(--serif); font-weight:600; font-size:1.22rem; letter-spacing:.06em; line-height:1.6; margin-bottom:14px; }
.feature p{ color:var(--ink-soft); font-size:.92rem; margin-bottom:22px; }
.textlink{
  font-size:.86rem; font-weight:600; letter-spacing:.04em; color:var(--accent-ink);
  text-decoration:underline 1px; text-underline-offset:.4em;
  text-decoration-color:var(--accent);
  transition:color .15s ease-out; display:inline-block;
}
.textlink:hover{ color:var(--ink); }
@media (max-width: 880px){ .feature-grid{ grid-template-columns:1fr; gap:40px; } }

/* ================= Generic card grid (publications, career, team features) ================= */
.card-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(24px,3.5vw,40px); }
.card-grid.cols-2{ grid-template-columns:repeat(2, 1fr); }
.card{
  border:1px solid var(--hairline); background:var(--paper-2);
  padding:clamp(24px,3vw,34px); position:relative;
}
.card h3{ font-family:var(--serif); font-weight:600; font-size:1.1rem; letter-spacing:.05em; margin-bottom:12px; line-height:1.6; }
.card p{ color:var(--ink-soft); font-size:.92rem; }
.card .card-icon{ width:30px; height:30px; color:var(--accent-ink); margin-bottom:18px; }
@media (max-width: 880px){ .card-grid, .card-grid.cols-2{ grid-template-columns:1fr; } }

/* ================= About / two-column split ================= */
.about{ background:var(--paper-2); }
.about-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(30px,5vw,80px); }
.about-body p{ color:var(--ink-soft); margin-bottom:1.4em; font-size:.94rem; }
.about-body .btn{ margin-top:8px; }
@media (max-width: 880px){ .about-grid{ grid-template-columns:1fr; } }

.split{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(30px,5vw,72px); align-items:start; }
.split.reverse{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
@media (max-width: 880px){ .split, .split.reverse{ grid-template-columns:1fr; } }

/* ================= Stats ================= */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:clamp(48px,6vw,80px); border-top:1px solid var(--hairline); }
.stats.cols-4{ grid-template-columns:repeat(4,1fr); }
.wrap > .stats:first-child{ margin-top:0; border-top:0; }
.stat{ padding:22px 24px 4px 0; position:relative; display:flex; align-items:baseline; gap:12px; }
.stat-value{ font-family:var(--serif); font-weight:600; font-size:1.7rem; line-height:1.2; font-variant-numeric:tabular-nums; }
.stat-value sup{ font-size:.6em; vertical-align:top; position:relative; top:.05em; }
.stat-label{ font-size:.86rem; color:var(--ink-soft); }
@media (max-width: 880px){
  .stats, .stats.cols-4{ grid-template-columns:1fr; }
  .stat{ padding:16px 0; border-bottom:1px solid var(--hairline-2); }
}

/* ================= Prose (long-form content) ================= */
.prose{ max-width:42em; font-size:.96rem; color:var(--ink-soft); }
.prose h2{ font-family:var(--serif); color:var(--ink); font-weight:600; font-size:1.5rem; letter-spacing:.05em; margin:2em 0 .7em; line-height:1.6; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-family:var(--serif); color:var(--ink); font-weight:600; font-size:1.15rem; letter-spacing:.05em; margin:1.6em 0 .6em; }
.prose p{ margin-bottom:1.3em; }
.prose ul, .prose ol{ margin:0 0 1.3em; padding-left:1.3em; }
.prose ul{ list-style:disc; }
.prose ol{ list-style:decimal; }
.prose li{ margin-bottom:.5em; }
.prose a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:.2em; }
.prose strong{ color:var(--ink); font-weight:600; }

/* ================= Tags ================= */
.tag-row{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{
  font-size:.72rem; letter-spacing:.06em; padding:5px 12px;
  border:1px solid var(--hairline); color:var(--ink-soft);
}

/* ================= Table ================= */
.tbl-wrap{ overflow-x:auto; border-top:1px solid var(--hairline); }
.tbl{ width:100%; border-collapse:collapse; font-size:.88rem; }
.tbl th, .tbl td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--hairline-2); vertical-align:top; }
.tbl th{ font-family:var(--sans); font-size:.8rem; letter-spacing:.04em; color:var(--ink-soft); font-weight:600; }
.tbl td{ color:var(--ink-soft); }
.tbl td.num, .tbl th.num{ font-variant-numeric:tabular-nums; }

/* ================= Timeline (genuinely sequential content only) ================= */
.timeline{ position:relative; padding-left:clamp(28px,4vw,44px); border-left:1px solid var(--hairline); }
.timeline-item{ position:relative; padding-bottom:clamp(36px,5vw,56px); }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:""; position:absolute; left:calc(-1 * clamp(28px,4vw,44px) - 5px); top:.4em;
  width:9px; height:9px; border-radius:50%; background:var(--accent);
}
.timeline-item h3{ font-family:var(--serif); font-weight:600; font-size:1.12rem; letter-spacing:.05em; margin-bottom:8px; }
.timeline-item p{ color:var(--ink-soft); font-size:.9rem; }
.timeline-eyebrow{ font-size:.8rem; letter-spacing:.04em; color:var(--accent-ink); display:block; margin-bottom:6px; font-weight:600; font-variant-numeric:tabular-nums; }

/* ================= Member / people grid ================= */
.member-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:clamp(24px,3vw,36px); }
.member{ border-top:1px solid var(--hairline); padding-top:20px; }
.member-photo{
  width:100%; aspect-ratio:1; overflow:hidden; margin-bottom:18px;
  border:1px solid var(--hairline); background:var(--paper-2);
}
.member-photo img{ width:100%; height:100%; object-fit:cover; }
.member h3{ font-family:var(--serif); font-weight:600; font-size:1.05rem; letter-spacing:.06em; margin-bottom:4px; }
.member .member-title{ font-size:.78rem; letter-spacing:.08em; color:var(--accent-ink); margin-bottom:8px; }
.member .member-meta{ font-size:.84rem; color:var(--ink-soft); }
.member.faculty{ grid-column:1 / -1; display:grid; grid-template-columns:200px 1fr; gap:32px; align-items:start; }
.member.faculty .member-photo{ margin-bottom:0; }
@media (max-width: 640px){
  .member.faculty{ grid-template-columns:1fr; }
  .member-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:20px; row-gap:24px; }
  .member{ padding-top:14px; }
  .member:only-child{ grid-column:1 / -1; }
}

/* ================= Status / coming soon ================= */
.status-block{ border:1px solid var(--hairline); background:var(--paper-2); padding:clamp(36px,5vw,56px); max-width:42em; }
.status-block .label{ margin-bottom:18px; display:inline-block; }
.status-block h2{ font-family:var(--serif); font-weight:600; font-size:1.6rem; letter-spacing:.05em; margin-bottom:16px; }
.status-block p{ color:var(--ink-soft); margin-bottom:1.2em; font-size:.94rem; }
.status-block ul{ margin:1.4em 0; }
.status-block li{ position:relative; padding-left:22px; margin-bottom:.6em; color:var(--ink-soft); font-size:.9rem; }
.status-block li::before{ content:""; position:absolute; left:0; top:.6em; width:10px; height:1px; background:var(--accent); }

/* ================= News (list: news.js renders news/news.json) ================= */
.news-list{ border-top:1px solid var(--hairline); }
.news-item{
  display:grid; grid-template-columns:7.5em 8em minmax(0,1fr); gap:6px 20px; align-items:baseline;
  padding:20px 0; border-bottom:1px solid var(--hairline-2);
}
.news-item time, .news-meta time{ font-variant-numeric:tabular-nums; color:var(--ink-soft); font-size:.88rem; }
.news-cat{ font-size:.8rem; color:var(--accent-ink); font-weight:600; }
.news-item a{ font-weight:500; text-decoration:underline 1px; text-underline-offset:.3em; text-decoration-color:transparent; transition:text-decoration-color .15s ease-out; }
.news-item a:hover{ text-decoration-color:currentColor; }
.news-empty{ padding:20px 0; color:var(--ink-soft); font-size:.92rem; }
.news-meta{ display:flex; gap:16px; align-items:baseline; margin-bottom:14px; }
.page-hero-inner, .news-body{ max-width:50em; }  /* article body starts where the headline does */
.news-back{ margin-top:clamp(40px,5vw,64px); }
.news-figure{ margin:2em 0; }
.news-figure img{ width:100%; height:auto; background:var(--paper-2); }
.news-figure figcaption{ margin-top:10px; font-size:.82rem; line-height:1.7; color:var(--ink-soft); }
.news-home-head{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap; margin-bottom:clamp(24px,3vw,36px); }
@media (max-width: 640px){
  .news-item{ grid-template-columns:auto 1fr; }
  .news-item a{ grid-column:1 / -1; }
}

/* ================= Footer ================= */
.site-footer{ background:var(--footer-bg); color:var(--footer-ink); padding-block:clamp(56px,7vw,90px) 36px; }
.footer-grid{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);
  gap:clamp(30px,4vw,64px); padding-bottom:clamp(40px,5vw,64px);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.footer-brand .logo{ font-size:1.35rem; margin-bottom:22px; }
.footer-brand p{ color:var(--footer-dim); font-size:.85rem; line-height:2.1; }
.footer-h{ font-size:.8rem; letter-spacing:.04em; color:var(--accent); margin-bottom:16px; font-weight:600; }
.footer-links a{ display:block; padding:5px 0; font-size:.86rem; color:var(--footer-dim); transition:color .15s ease-out, transform .15s ease-out; background:none; border:0; text-align:left; cursor:pointer; font-family:var(--sans); }
.footer-links a:hover, .footer-links a.revealed{ color:var(--footer-ink); }
.footer-links a:hover{ transform:translateX(4px); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:28px; flex-wrap:wrap; gap:12px; font-size:.74rem; letter-spacing:.1em; color:var(--footer-dim); }
@media (max-width: 880px){ .footer-grid{ grid-template-columns:1fr; } }

/* ================= Reveal motion ================= */
/* Only the hero / page-hero animates, once, on load. Other .reveal elements render immediately
   (scroll-triggered fades hid tall blocks and added noise to every section). */
.motion-ok .hero .reveal, .motion-ok .page-hero .reveal{
  opacity:0; transform:translateY(14px);
  transition:opacity .6s ease-out, transform .6s ease-out;
}
.motion-ok .hero .reveal.visible, .motion-ok .page-hero .reveal.visible{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; }