/* === Unify (site-wide small overrides) v2025-09-08 === */
/* Loaded after existing CSS */

:root{
  --u-block-gap: clamp(12px, 1.6vw, 22px);
  --u-radius: 12px;
  --u-radius-lg: 16px;
}
html{-webkit-text-size-adjust:100%;}
body{ line-height:1.7; letter-spacing:.02em; text-rendering:optimizeLegibility; }

h1{ font-size:clamp(1.9rem,2.2vw+1rem,2.5rem); line-height:1.2; margin:.9rem 0 .5rem; }
h2{ font-size:clamp(1.5rem,1.4vw+1rem,1.9rem); line-height:1.25; margin:.85rem 0 .45rem; }
h3{ font-size:clamp(1.25rem,1vw+1rem,1.5rem); line-height:1.3; margin:.8rem 0 .4rem; }
h4,h5,h6{ line-height:1.35; margin:.75rem 0 .35rem; }

main > * + *{ margin-block-start: var(--u-block-gap); }

.container{ max-width: 1100px; margin-inline:auto; padding-inline: clamp(12px,2vw,20px); }

.site-nav a{ border-radius: 10px; }
.site-nav a[aria-current="page"], .site-nav .current > a{
  background: rgba(0,0,0,.06); font-weight: 600;
}
header .site-nav a#switch-en, header .site-nav a#switch-ja{
  color: var(--text) !important; background: transparent !important; border: 0 !important; box-shadow: none !important;
}
header .site-nav a#switch-en:visited, header .site-nav a#switch-ja:visited{ color: var(--text) !important; }
header .site-nav a#switch-en:hover, header .site-nav a#switch-ja:hover{ color: inherit !important; background: rgba(0,0,0,.06) !important; }

a.btn, .btn{
  display:inline-block; padding:.45rem .8rem; border-radius: 10px; border:1px solid var(--line);
  background: var(--surface); text-decoration:none; box-shadow: var(--shadow); transition: .2s ease;
}
.btn:hover{ background:#f4f6ff; border-color:#1259ff; }
.btn-secondary{ background: #fff; }
.btn-ghost{ background: transparent; border-color: transparent; box-shadow: none; }

.card{ background: var(--surface); border:1px solid var(--line);
  border-radius: var(--u-radius-lg); box-shadow: var(--shadow); padding: .9rem; }

figure{ margin:0 0 1rem; }
figure img{ display:block; width:100%; height:auto; border-radius: var(--u-radius); }
img{ image-rendering:auto; }
iframe, video{ border-radius: var(--u-radius); max-width:100%; }

table{ width:100%; border-collapse: collapse; }
th, td{ padding:.5rem .6rem; border-bottom:1px solid var(--line); }
thead th{ background:#fafafa; }

details.accordion > summary{
  padding:.45rem .6rem; border:1px solid var(--line); border-radius:10px; background: var(--surface); cursor: pointer;
}
details[open] > summary{ background:#f9fafb; }

a:focus-visible, button:focus-visible, summary:focus-visible, .site-nav a:focus-visible{
  outline:2px solid #1259ff; outline-offset:2px; border-radius:8px;
}

main .faculty-list > li:not(.with-photo){ padding-left: .75rem; }
@media (min-width: 720px){
  main .faculty-list > li:not(.with-photo){ padding-left: 1rem; }
}
main .faculty-list > li.heading-students{ font-weight:700; margin:.75rem 0 .25rem; }

/* === Mobile typography unify (<=480px) === */
@media (max-width: 480px){
  html { font-size: 16px; }               /* base */
  body { font-size: 1rem; line-height: 1.7; letter-spacing: .02em; }

  /* Fixed, harmonious scale on small screens */
  h1 { font-size: 1.625rem; line-height: 1.25; }   /* ~26px */
  h2 { font-size: 1.375rem; line-height: 1.28; }   /* ~22px */
  h3 { font-size: 1.125rem; line-height: 1.32; }   /* ~18px */
  h4 { font-size: 1rem;     line-height: 1.35; }   /* 16px */
  h5, h6 { font-size: .95rem; line-height: 1.4; }

  /* Global rhythm */
  main > * + * { margin-block-start: clamp(12px, 3.5vw, 18px); }

  /* Navigation & buttons */
  .site-nav a { font-size: .95rem; }
  a.btn, .btn { font-size: .95rem; padding: .45rem .75rem; }

  /* Meta/small texts */
  .meta, small, .caption { font-size: .925rem; }

  /* Cards & containers */
  .card { padding: .8rem; }
  .container { padding-inline: 14px; }

  /* Tables (avoid oversized cells) */
  th, td { padding: .45rem .5rem; }

  /* Members list readability */
  main .faculty-list > li:not(.with-photo){ padding-left: .75rem; }
}

/* === Tablet typography unify (481px–900px) === */
@media (min-width: 481px) and (max-width: 900px){
  html { font-size: 17px; }
  body { font-size: 1rem; line-height: 1.75; }

  h1 { font-size: 2rem; line-height: 1.25; }
  h2 { font-size: 1.625rem; line-height: 1.28; }
  h3 { font-size: 1.375rem; line-height: 1.3; }
  h4 { font-size: 1.125rem; line-height: 1.32; }
  h5, h6 { font-size: 1rem; }

  .site-nav a { font-size: 1rem; }
  a.btn, .btn { font-size: 1rem; padding: .5rem .9rem; }

  .meta, small, .caption { font-size: .95rem; }

  .card { padding: 1rem; }
  .container { padding-inline: 18px; }
}

/* === English page font tweaks === */
html[lang="en"] body {
  letter-spacing: normal;
  word-spacing: .02em;
}
html[lang="en"] h1, 
html[lang="en"] h2, 
html[lang="en"] h3 {
  letter-spacing: .5px;
}

/* === English page tuning === */
html[lang="en"] body{
  letter-spacing: .005em;  /* tighter than JP for Latin scripts */
  word-spacing: normal;
}
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3{
  line-height: 1.22; /* slightly tighter for Latin headings */
}
/* On very small screens, keep headings compact on EN pages */
@media (max-width: 480px){
  html[lang="en"] h1{ font-size: 1.55rem; }
  html[lang="en"] h2{ font-size: 1.32rem; }
  html[lang="en"] h3{ font-size: 1.08rem; }
}

/* === Brand & Fonts unify === */
/* Brand token (fallback to existing --brand-accent or --accent or #1259ff) */
:root{
  --brand: var(--brand-accent, var(--accent, #1259ff));
  --brand-contrast: #ffffff;
}

/* Font stacks (scope by lang) */
html[lang="ja"] body{
  font-family: "Noto Sans JP", "Yu Gothic Medium", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
html[lang="en"] body{
  font-family: "Roboto", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Heading & link accents */
h1, h2, h3{ color: var(--text); }
a{ color: var(--brand); }
a:hover, a:focus{ text-decoration: underline; }

/* Optional primary button */
.btn-primary{
  background: var(--brand);
  color: var(--brand-contrast);
  border-color: var(--brand);
}
.btn-primary:hover{ filter: brightness(0.95); }

/* Member photos: force square, cover */
img.member-photo{
  width: 112px; height: 112px;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: #f3f4f6;
}
@media (min-width: 992px){
  img.member-photo{ width: 128px; height: 128px; }
}