/* Keisuke Yoshida — shared site styles */

:root{
  --bg:#ffffff; --surface:#f7f7f4; --line:#e6e4dc;
  --text:#1f1f1c; --muted:#6a6a63; --accent:#185fa5; --accent-soft:#e6f1fb;
  --maxw:920px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",
    "Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;
  line-height:1.7; font-size:16px;
}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px;}

/* ---- top navigation ---- */
header{position:sticky; top:0; z-index:10; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(6px); border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 0; flex-wrap:wrap;}
.brand{font-weight:600; font-size:16px; letter-spacing:.2px;}
.menu{display:flex; gap:18px; flex-wrap:wrap; font-size:14px;}
.menu a{color:var(--muted);}
.menu a:hover,.menu a.active{color:var(--text); text-decoration:none;}
.menu a.active{border-bottom:2px solid var(--accent); padding-bottom:2px;}
.menu a.lang{color:var(--accent);}

/* ---- page title (subpages) ---- */
.page-title{font-size:28px; font-weight:600; letter-spacing:.2px; margin:32px 0 8px;}
.page-intro{margin:0 0 8px; color:var(--muted); font-size:16px;}

/* ---- hero (home) ---- */
.hero{display:grid; grid-template-columns:150px 1fr; gap:28px;
  align-items:center; padding:40px 0 28px;}
.hero img{width:150px; height:auto; border-radius:10px; border:1px solid var(--line);}
.hero h1{margin:0 0 6px; font-size:30px; font-weight:600; letter-spacing:.2px;}
.role{margin:0 0 16px; color:var(--muted); font-size:15px;}
.lede{margin:0 0 18px; font-size:18px; line-height:1.6;}
.lede b{font-weight:600;}
.links{display:flex; gap:10px; flex-wrap:wrap;}
.pill{display:inline-flex; align-items:center; gap:7px; font-size:14px;
  padding:7px 14px; border:1px solid var(--line); border-radius:8px;
  color:var(--text); background:var(--bg);}
.pill:hover{border-color:var(--accent); color:var(--accent); text-decoration:none;}
.pill svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8;}

/* ---- sections & headings ---- */
section{padding:26px 0; border-top:1px solid var(--line);}
h2{font-size:20px; font-weight:600; margin:0 0 16px;}
h3{font-size:17px; font-weight:600; margin:1.6rem 0 .5rem;}
h4{font-size:16px; font-weight:600; margin:1.4rem 0 .4rem;}
hr{border:none; border-top:1px solid var(--line); margin:1.8rem 0;}

/* ---- figures ---- */
.figure{background:var(--surface); border:1px solid var(--line);
  border-radius:10px; overflow:hidden;}
.figure img{display:block; width:100%; height:auto;}
.figure figcaption{padding:10px 14px; font-size:13px; color:var(--muted);}
.figgrid{display:grid; gap:16px;}
.figrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:6px; align-items:start;}
.figure .credit{display:block; margin-top:3px; font-size:12px; font-style:italic; color:#9a988f;}

/* ---- highlight cards ---- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px;}
.card{background:var(--bg); border:1px solid var(--line); border-radius:12px;
  padding:16px 18px;}
.tag{font-size:12px; font-weight:600; color:var(--accent);}
.tag.editor{color:#0f6e56;}
.card p{margin:8px 0 0; font-size:14px; line-height:1.5;}

/* ---- reference / list blocks ---- */
.pubs{list-style:none; margin:0; padding:0;}
.pubs li{padding:12px 0; border-bottom:1px solid var(--line); font-size:15px;}
.pubs li:last-child{border-bottom:none;}
.pubs b{font-weight:600;}
.pubs .meta{color:var(--muted); font-style:italic;}

.interests{list-style:none; margin:0; padding:0;}
.interests li{padding:10px 0; border-bottom:1px solid var(--line); font-size:15px;}
.interests li:last-child{border-bottom:none;}
.interests b{font-weight:600;}
.interests .sub{color:var(--muted); font-size:14px;}

/* ---- generic content lists (subpages) ---- */
.content-list{padding-left:1.25rem;}
.content-list li{margin:.45rem 0; font-size:15px; line-height:1.6;}
.content-list li b{font-weight:600;}
.content-list li i{color:var(--muted);}

/* publication list with year markers */
.publication-list{padding-left:1.4rem;}
.publication-list li{margin:.55rem 0; font-size:15px; line-height:1.6;}
.publication-list li b{font-weight:600;}
.year{font-size:16px; font-weight:600; margin:1.6rem 0 .5rem; list-style:none;}

/* ---- footer ---- */
footer{padding:28px 0 48px; color:var(--muted); font-size:13px; border-top:1px solid var(--line); margin-top:8px;}
.updated{color:var(--muted); font-size:13px;}

@media (max-width:640px){
  .hero{grid-template-columns:1fr; gap:18px; text-align:left; padding:28px 0 20px;}
  .hero img{width:120px;}
  .hero h1{font-size:26px;}
  .lede{font-size:16px;}
  .page-title{font-size:24px;}
}