@charset "UTF-8";
/* Masaki Tanaka — personal site  |  shared stylesheet */

:root{
  --ink:#1d1d1d;
  --accent:#3c286e;
  --line:#d8d8d8;
  --bg:#fff;
  --font-display:"Marcellus",serif;
  --font-body:"EB Garamond",serif;
  --font-util:"Jost",sans-serif;
  --font-jp:"Shippori Mincho",serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{font-size:62.5%;}
body{
  width:100%;overflow-x:hidden;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased;
}
:lang(ja){font-family:var(--font-jp);}
img{max-width:100%;height:auto;vertical-align:bottom;}
ul,li{list-style:none;}
a{text-decoration:none;color:inherit;transition:all .3s ease;}
h1,h2,h3{font-weight:normal;}
button{font-family:inherit;cursor:pointer;}
@media (min-width:901px){a:hover img{opacity:.55;}}

/* ---------- header: vertical title (right edge) ---------- */
#header{position:fixed;top:0;left:0;height:100vh;height:100dvh;z-index:98;}
.site-title{
  position:fixed;top:0;bottom:0;right:26px;margin:auto;height:320px;
  display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;
  font-family:var(--font-display);font-size:2.3rem;letter-spacing:0.55rem;
  color:var(--ink);text-transform:uppercase;
}
.site-title:hover{color:var(--accent);}
.edge-left{display:none;}
@media (min-width:1200px){
  .edge-left{
    display:block;position:fixed;top:0;bottom:0;left:-70px;margin:auto;height:20px;
    line-height:20px;transform:rotate(90deg);font-family:var(--font-util);font-weight:300;
    font-size:1.2rem;letter-spacing:0.3rem;color:var(--accent);text-transform:uppercase;
  }
}
@media (max-width:1200px){
  #header{width:100%;height:62px;background:var(--bg);border-bottom:1px solid #eee;}
  .site-title{writing-mode:horizontal-tb;height:auto;top:18px;left:22px;right:auto;bottom:auto;
    font-size:1.9rem;letter-spacing:0.3rem;}
}

/* ---------- hamburger ---------- */
#menuButton{position:fixed;top:18px;right:26px;width:48px;height:48px;z-index:100;
  background:transparent;border:none;display:block;}
#menuButton span{position:absolute;left:8px;width:32px;height:1.5px;background:var(--accent);transition:all .4s;}
#menuButton span:nth-child(1){top:16px;}
#menuButton span:nth-child(2){top:50%;margin-top:-1px;width:22px;}
#menuButton span:nth-child(3){bottom:16px;}
#menuButton.active span:nth-child(1){top:50%;margin-top:-1px;transform:rotate(45deg);}
#menuButton.active span:nth-child(2){opacity:0;}
#menuButton.active span:nth-child(3){bottom:auto;top:50%;margin-top:-1px;transform:rotate(-45deg);}
@media (max-width:1200px){#menuButton{top:8px;right:14px;}#menuButton span{width:24px;}}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:100%;width:42%;height:100%;background:var(--bg);
  display:grid;place-content:center;padding:50px;z-index:99;transition:all .5s ease;
  border-left:1px solid #f0f0f0;}
.nav.open{left:58%;}
.nav ul{width:100%;}.nav li{text-align:center;}
.nav li a{display:block;font-family:var(--font-display);font-size:2.3rem;letter-spacing:0.2rem;
  padding:15px 0;color:var(--ink);}
@media (min-width:1025px){.nav li a:hover{color:var(--accent);}}
.nav li a.current{color:var(--accent);}
.nav .lang{font-family:var(--font-util);font-weight:300;font-size:1.3rem;letter-spacing:0.2rem;
  color:var(--accent);margin-top:12px;}
@media (max-width:1024px){.nav{width:100%;}.nav.open{left:0;}}

/* ---------- hero (home) ---------- */
.hero{position:relative;width:100%;height:100vh;height:100dvh;}
.hero-img{position:absolute;bottom:0;left:0;width:74%;height:100%;overflow:hidden;}
.hero-img img{width:120%;height:120%;object-fit:cover;object-position:center;
  opacity:0;transition:all 2.4s ease;}
.hero-img.in img{width:100%;height:100%;opacity:1;}
@media (max-width:1200px){.hero{height:80vh;height:80dvh;}.hero-img{width:100%;height:78%;}}
@media (max-width:600px){.hero{height:68vh;height:68dvh;}}

/* ---------- layout ---------- */
.contents{max-width:1000px;margin:0 auto;padding:0 24px;}
.sec-title{position:relative;width:100%;height:1px;background:var(--ink);margin:72px 0 40px;}
.sec-title span{position:absolute;left:0;top:-8px;background:var(--bg);display:inline-block;
  font-family:var(--font-util);font-weight:400;font-size:1.1rem;letter-spacing:0.32rem;
  text-transform:uppercase;padding-right:12px;}

/* sub-page heading */
.page-head{max-width:1000px;margin:0 auto;padding:140px 24px 0;text-align:center;}
@media (max-width:1200px){.page-head{padding:108px 24px 0;}}
.page-head h1{font-family:var(--font-display);font-size:4.4rem;letter-spacing:0.1rem;}
.page-head .sub{font-family:var(--font-util);font-weight:300;font-size:1.2rem;
  letter-spacing:0.3rem;text-transform:uppercase;color:var(--accent);padding-top:14px;}
:lang(ja) .page-head .sub{font-family:var(--font-jp);text-transform:none;letter-spacing:0.2rem;}
@media (max-width:600px){.page-head h1{font-size:3.2rem;}}

/* about (home) */
.about{display:flex;gap:48px;align-items:flex-start;}
.about .photo{flex:0 0 190px;text-align:center;}
.about .photo img{width:190px;height:190px;object-fit:cover;border-radius:50%;}
.about .photo .name{font-family:var(--font-display);font-size:1.7rem;letter-spacing:0.05rem;padding-top:16px;}
.about .photo .role{display:block;font-family:var(--font-util);font-weight:300;font-size:1.15rem;
  letter-spacing:0.1rem;color:var(--accent);padding-top:4px;}
.about .lead{flex:1;}
.about .lead h1{font-family:var(--font-display);font-size:3.4rem;line-height:1.35;
  letter-spacing:0.06rem;padding-bottom:26px;}
:lang(ja) .about .lead h1{font-family:var(--font-jp);font-weight:600;font-size:3rem;}
.about .lead p{font-size:2rem;line-height:1.95;text-align:justify;}
:lang(ja) .about .lead p{font-size:1.7rem;line-height:2.05;}
.about .lead strong{font-weight:500;}
@media (max-width:780px){
  .about{flex-direction:column;align-items:center;}
  .about .photo{flex:none;}
  .about .lead h1{text-align:center;font-size:2.8rem;}
}

/* link list (selected research on home) */
.link-list{overflow:hidden;margin-top:-6px;}
.link-list li{float:left;width:50%;font-size:1.9rem;line-height:2;padding-right:24px;}
:lang(ja) .link-list li{font-size:1.7rem;}
.link-list li a{color:var(--accent);display:inline-block;}
@media (min-width:901px){.link-list li a:hover{opacity:.55;}}
.link-list li .yr{font-family:var(--font-util);font-weight:400;font-size:1.3rem;
  letter-spacing:0.08rem;padding-right:16px;color:var(--accent);}
@media (max-width:780px){
  .link-list li{float:none;width:100%;line-height:1.5;padding:12px 0;border-bottom:1px dotted var(--accent);}
  .link-list li .yr{display:block;padding-bottom:2px;}
}

/* small "view all" link */
.more{display:inline-block;margin-top:18px;font-family:var(--font-util);font-weight:400;
  font-size:1.3rem;letter-spacing:0.12rem;text-transform:uppercase;color:var(--accent);}
.more:after{content:" \2192";}

/* photo teaser (home) */
.teaser{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.teaser a{position:relative;overflow:hidden;background:#f2f2f2;}
.teaser a:before{content:"";display:block;padding-top:66.66%;}
.teaser a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
@media (min-width:901px){.teaser a:hover img{transform:scale(1.06);}}

/* pill button */
.pill{margin:26px 0;}
.pill a{position:relative;display:block;max-width:300px;border:1px solid var(--accent);
  border-radius:32px;font-family:var(--font-util);font-weight:400;font-size:1.3rem;
  letter-spacing:0.18rem;text-transform:uppercase;line-height:62px;height:62px;color:var(--accent);padding:0 34px;}
:lang(ja) .pill a{font-family:var(--font-jp);text-transform:none;letter-spacing:0.1rem;}
.pill a:after{content:"";position:absolute;top:0;bottom:0;right:28px;margin:auto;width:9px;height:9px;
  border-right:1px solid var(--accent);border-bottom:1px solid var(--accent);transform:rotate(-45deg);}
@media (min-width:901px){.pill a:hover{border-color:var(--line);color:var(--ink);}
  .pill a:hover:after{border-color:var(--ink);}}

/* CV list */
.cv-list{margin-top:-4px;}
.cv-list li{display:flex;gap:28px;padding:14px 0;border-bottom:1px solid #efefef;}
.cv-list li:last-child{border-bottom:none;}
.cv-list .yr{flex:0 0 120px;font-family:var(--font-util);font-weight:400;font-size:1.35rem;
  letter-spacing:0.06rem;line-height:1.5;color:var(--accent);padding-top:4px;}
.cv-list .detail{flex:1;font-size:1.9rem;line-height:1.55;}
:lang(ja) .cv-list .detail{font-size:1.7rem;}
.cv-list .detail strong{font-weight:500;}
.cv-list .detail .meta{display:block;font-size:1.5rem;color:#777;padding-top:2px;}
.cv-list .detail .committee{display:block;font-size:1.5rem;line-height:1.85;color:#666;padding-top:8px;}
.cv-list .detail .committee b{font-family:var(--font-util);font-weight:400;font-size:1.15rem;
  letter-spacing:0.08rem;text-transform:uppercase;color:var(--accent);margin-right:9px;}
:lang(ja) .cv-list .detail .committee{font-size:1.5rem;}
:lang(ja) .cv-list .detail .committee b{font-family:var(--font-jp);text-transform:none;
  letter-spacing:0.04rem;font-size:1.4rem;}
.cv-list .detail a{color:var(--accent);}
.cv-aff{font-size:1.9rem;line-height:1.65;padding:2px 0 10px;}
:lang(ja) .cv-aff{font-size:1.7rem;}
.cv-aff strong{font-weight:500;}
.cv-email{font-size:1.7rem;color:#555;padding-bottom:2px;}
.cv-email b{font-family:var(--font-util);font-weight:400;font-size:1.15rem;letter-spacing:0.08rem;
  text-transform:uppercase;color:var(--accent);margin-right:10px;}
:lang(ja) .cv-email b{font-family:var(--font-jp);text-transform:none;}
.cv-links{margin-top:-2px;}
.cv-links li{font-size:1.7rem;line-height:2.05;}
.cv-links a{color:var(--accent);}
.cv-links .id{color:#999;font-family:var(--font-util);font-weight:300;font-size:1.3rem;
  letter-spacing:0.04rem;margin-left:6px;}
@media (max-width:600px){
  .cv-list li{flex-direction:column;gap:2px;}
  .cv-list .yr{flex:none;}
}

/* research entries */
.entry{padding:6px 0 30px;border-bottom:1px solid #efefef;margin-bottom:30px;}
.entry:last-child{border-bottom:none;}
.entry h3{font-size:2.2rem;line-height:1.45;color:var(--accent);}
:lang(ja) .entry h3{font-size:2rem;}
.entry .meta{font-family:var(--font-util);font-weight:300;font-size:1.3rem;letter-spacing:0.05rem;
  color:#888;padding:6px 0 12px;}
:lang(ja) .entry .meta{font-family:var(--font-jp);}
.entry p{font-size:1.8rem;line-height:1.8;text-align:justify;}
:lang(ja) .entry p{font-size:1.6rem;line-height:1.95;}
.entry .links{padding-top:10px;}
.entry .links a{font-family:var(--font-util);font-weight:400;font-size:1.25rem;letter-spacing:0.1rem;
  text-transform:uppercase;color:var(--accent);margin-right:18px;}
.entry h3 .enum{font-family:var(--font-util);font-weight:400;font-size:1.4rem;color:var(--accent);
  letter-spacing:0.04rem;margin-right:10px;}
.entry .meta a{color:var(--accent);}
.entry .entry-note{font-size:1.5rem;line-height:1.75;color:#777;padding-top:6px;}
:lang(ja) .entry .entry-note{font-size:1.45rem;}
.entry .entry-note a{color:var(--accent);}
:lang(ja) .cv-list .yr{font-family:var(--font-jp);letter-spacing:0;}

/* generic prose (legal pages) */
.prose h2{font-family:var(--font-display);font-size:2.4rem;letter-spacing:0.04rem;padding:34px 0 12px;}
:lang(ja) .prose h2{font-family:var(--font-jp);font-weight:600;font-size:2.1rem;}
.prose p{font-size:1.8rem;line-height:1.9;text-align:justify;padding-bottom:14px;}
:lang(ja) .prose p{font-size:1.6rem;line-height:1.95;}
.prose a{color:var(--accent);}

/* contact */
.contact p{font-size:1.9rem;line-height:1.9;}
:lang(ja) .contact p{font-size:1.7rem;}
.contact a{color:var(--accent);}
.note{font-size:1.4rem;line-height:1.9;color:#888;padding-top:26px;text-align:justify;}

/* dummy hint */
.hint{font-family:var(--font-util);font-weight:300;font-size:1.2rem;color:#999;padding-top:18px;}
:lang(ja) .hint{font-family:var(--font-jp);}

/* gallery (photo page) */
.gallery{max-width:1100px;margin:46px auto 0;padding:0 24px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.gallery a{display:block;position:relative;overflow:hidden;background:#f2f2f2;}
.gallery a:before{content:"";display:block;padding-top:66.66%;}
.gallery a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease,opacity .3s ease;}
.gallery img{
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;}
@media (min-width:901px){.gallery a:hover img{transform:scale(1.06);}}
@media (max-width:800px){.gallery{grid-template-columns:repeat(2,1fr);gap:10px;}}
@media (max-width:480px){.gallery{grid-template-columns:repeat(2,1fr);gap:6px;}}

/* footer */
footer{max-width:1000px;margin:90px auto 0;padding:54px 24px;}
footer .links{font-family:var(--font-util);font-weight:300;font-size:1.3rem;letter-spacing:0.06rem;
  padding-bottom:14px;}
:lang(ja) footer .links{font-family:var(--font-jp);}
footer .links a{color:var(--ink);margin-right:18px;}
footer .links a:hover{color:var(--accent);}
footer .mark{font-family:var(--font-display);font-size:1.6rem;letter-spacing:0.3rem;text-transform:uppercase;}
footer .copy{font-family:var(--font-util);font-weight:300;font-size:1.2rem;color:#999;padding-top:8px;}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;}
  .hero-img img{opacity:1;width:100%;height:100%;}
}

/* contact form */
.contact-intro{max-width:760px;font-size:1.7rem;line-height:1.95;color:var(--ink);}
:lang(ja) .contact-intro{font-size:1.5rem;line-height:2.05;}
.cform{max-width:680px;display:flex;flex-direction:column;gap:24px;margin-top:40px;}
.cform label{display:flex;flex-direction:column;gap:9px;}
.cform label span{font-family:var(--font-util);text-transform:uppercase;letter-spacing:0.14rem;
  font-size:1.15rem;color:#6a6a6a;}
:lang(ja) .cform label span{font-family:var(--font-jp);text-transform:none;letter-spacing:0.08rem;font-size:1.3rem;}
.cform input,.cform textarea{font-family:var(--font-body);font-size:1.6rem;color:var(--ink);
  background:transparent;border:1px solid var(--line);border-radius:2px;padding:12px 14px;
  outline:none;transition:border-color .2s;}
:lang(ja) .cform input,:lang(ja) .cform textarea{font-family:var(--font-jp);font-size:1.5rem;}
.cform textarea{resize:vertical;line-height:1.8;min-height:160px;}
.cform input:focus,.cform textarea:focus{border-color:var(--accent);}
.cform button{align-self:flex-start;margin-top:6px;font-family:var(--font-util);text-transform:uppercase;
  letter-spacing:0.2rem;font-size:1.3rem;color:#fff;background:var(--accent);border:none;
  padding:15px 46px;border-radius:2px;cursor:pointer;transition:opacity .2s;}
:lang(ja) .cform button{font-family:var(--font-jp);text-transform:none;letter-spacing:0.12rem;}
.cform button:hover{opacity:.85;}
.cform-warn{display:none;font-size:1.35rem;color:#b4322f;}
:lang(ja) .cform-warn{font-size:1.3rem;}
.cform-note{font-size:1.35rem;color:#8a8a8a;padding-top:2px;}
:lang(ja) .cform-note{font-size:1.3rem;}
.contact-social{margin-top:44px;font-family:var(--font-util);letter-spacing:0.06rem;font-size:1.45rem;}
.contact-social a{color:var(--accent);margin-right:18px;}