@charset "UTF-8";
@font-face {
  font-family: "Portfolio Baskervville"; src:url("fonts/Baskervville-latin.woff") format("woff");
  font-style:normal; font-weight:400 700; font-display:swap;
  unicode-range:U+0000-024F,U+2000-206F,U+20AC;
}
/* In Japanese sentences, digits come from the same gothic face as the surrounding kanji. */
@font-face {
  font-family: "Baskervville Text"; src: url("fonts/Baskervville-latin.woff") format("woff");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-002F,U+003A-024F,U+2000-206F,U+20AC;
}
:root {
  --blue:#2756cb; --ink:#fff; --muted:#e2eaff; --line:rgb(235 242 255/.47);
  --gothic:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --type:"Portfolio Baskervville",Baskerville,var(--gothic);
  --gutter:clamp(22px,6.25vw,120px); --page:min(100% - 2 * var(--gutter),1536px);
  --dock-height:clamp(64px,5.6vw,86px); --anchor:calc(var(--dock-height) + 26px);
}
* ,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:var(--anchor);background:var(--blue)}
body{margin:0;isolation:isolate;background:transparent;color:var(--ink);font:400 16px/1.6 var(--type);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;z-index:-1;inset:0;pointer-events:none;background-color:var(--blue);background-image:url("assets/glass-grain.png"),linear-gradient(112deg,rgb(34 77 199/.20) 30%,rgb(47 97 231/.22) 72%,rgb(54 92 204/.54)),url("assets/sky.webp");background-position:center,center,center;background-size:146px,cover,cover}
img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button{font:inherit}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.skip{position:fixed;z-index:40;top:8px;left:8px;transform:translateY(-170%);background:white;color:#193c97;padding:8px 16px}.skip:focus{transform:none}
.wrap{width:var(--page);margin-inline:auto}
.hero{position:relative;isolation:isolate;overflow:hidden;width:100%;height:100vh;height:100dvh;color:#fff;background:var(--blue)}
.filmstrip,.reel{display:flex;width:max-content;height:100%}.reel,.reel picture{flex:none}.reel picture{width:max(100vw,calc(100dvh * var(--frame-ratio)));height:100%}.reel img{width:100%;height:100%;object-fit:cover}
.filmstrip{animation:pan var(--period,100s) linear .75s infinite;will-change:transform}
@keyframes pan{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hero.offscreen .filmstrip,.hero:focus-within .filmstrip{animation-play-state:paused}
.hero-band{position:absolute;inset:auto 0 0;display:grid;align-items:center;min-height:30.47%;padding:clamp(20px,2.5vw,48px) clamp(16px,3.2vw,72px);background:linear-gradient(102deg,rgb(32 73 179/.82),rgb(40 87 208/.68) 68%,rgb(65 112 225/.57));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.hero-band::before,.dock::before{content:"";position:absolute;inset:0;background:url("assets/glass-grain.png") center/146px;pointer-events:none;opacity:.7}
.hero-band-inner{position:relative;width:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.hero h1,.dock-name,.footer-name,.section h2,.about h2,.contact h2,.subhero h1{font-weight:400}
.hero h1{font-size:clamp(70px,7.35vw,155px);line-height:.94;letter-spacing:-.048em;margin:0;flex:none}
nav{display:flex;align-items:center;white-space:nowrap}.hero nav{gap:clamp(19px,3.65vw,78px);padding-bottom:.15em}
.hero nav a{font-weight:510;font-size:clamp(21px,2.02vw,43px);line-height:1.15}
.dock-slot{position:sticky;top:0;z-index:15;height:0}.inner .dock-slot{height:var(--dock-height)}
.dock{position:relative;height:var(--dock-height);color:white;background:rgb(33 76 186/.91);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
html[data-handoff] [data-home-dock]:not(.pinned){visibility:hidden}
.dock.pinned,.inner .dock{position:fixed;inset:0 0 auto}
.dock-inner{position:relative;display:flex;align-items:center;justify-content:space-between;width:var(--page);margin:auto;height:100%}
.dock-name{font-size:clamp(22px,1.83vw,31px);line-height:.86;letter-spacing:-.047em}
.dock nav{gap:clamp(22px,3.1vw,54px)}.dock nav a{font-weight:540;font-size:clamp(15px,1.24vw,22px);line-height:1.2}
.section,.about{width:var(--page);margin:auto}
.section h2,.about h2,.contact h2{font-size:clamp(52px,6.4vw,104px);letter-spacing:-.053em;line-height:1.03;margin:0}
.about{scroll-margin-top:calc(-1 * var(--anchor));padding-top:calc(var(--dock-height) + clamp(35px,3.9vw,76px))}
.about-grid{display:grid;grid-template-columns:minmax(0,.91fr) minmax(0,1.09fr);gap:clamp(50px,8.4vw,150px);align-items:center;margin:clamp(28px,3.4vw,60px) 0 0}
.portrait{width:100%;height:auto;max-width:500px;aspect-ratio:1;object-fit:cover}
.bio{max-width:42em}.bio p,.bio h3{margin:0}.bio .roman{font-size:clamp(21px,2.1vw,36px);line-height:1.3}
.bio h3{margin:.13em 0 .5em;font-size:clamp(37px,3.8vw,66px);line-height:1.22;letter-spacing:.035em;font-weight:650}
.bio .profile-text{font-size:clamp(15px,1.13vw,19px);font-weight:500;line-height:1.96;line-break:strict}.profile-text+.profile-text{margin-top:.9em}
.news,.career{padding-top:clamp(66px,8.2vw,148px);scroll-margin-top:calc(-1 * clamp(66px,8.2vw,148px))}.career{padding-bottom:clamp(76px,8.2vw,148px)}
.record-list{padding:0;list-style:none;margin:clamp(22px,3.3vw,56px) 0 0;border-top:1px solid var(--line)}
.record{min-height:clamp(64px,5.8vw,99px);display:grid;grid-template-columns:clamp(108px,16vw,260px) 1fr;align-items:baseline;padding:clamp(16px,1.55vw,28px) 0;gap:16px;border-bottom:1px solid var(--line);line-height:1.48}
.record-date{font-size:clamp(17px,1.55vw,26px);white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
.record-info strong{font-size:clamp(16px,1.49vw,25px);font-weight:600}.record-info small{display:none}
.contact{padding:clamp(56px,7.6vw,128px) var(--gutter);text-align:left;border:0}
.contact h2{margin:0 0 clamp(24px,4vh,50px)}
.page-footer{background:rgb(31 72 179/.42);padding:clamp(42px,6.4vw,105px) 0 clamp(30px,3.5vw,65px)}
.footer-inner{width:var(--page);margin:auto;display:grid;grid-template-columns:1fr auto;align-items:end;gap:44px 0}.footer-right{display:contents}
.footer-name{font-size:clamp(48px,6.2vw,108px);line-height:.88;letter-spacing:-.052em}
.page-footer nav{justify-content:end;gap:clamp(18px,2.5vw,48px);font-size:clamp(18px,1.65vw,27px)}
.footer-right small,.social{grid-row:2;align-self:stretch;padding-top:22px}.footer-right small{grid-column:1;display:flex;align-items:center;font-size:15px}
.social{grid-column:2;display:flex;align-items:center;justify-content:end;gap:12px}.social a{width:38px;height:38px;display:grid;place-items:center}.social img{width:22px;height:22px;filter:brightness(0) invert(1)}
.inner main{min-height:50vh}.subhero{padding:clamp(36px,5.5vw,84px) 0 clamp(30px,3.6vw,60px);border-bottom:1px solid var(--line);background:rgb(42 87 207/.18)}
.subhero .crumb{display:inline-block;font-size:15px;margin-bottom:24px}.subhero h1{font-size:clamp(50px,7vw,105px);line-height:1.05;margin:0;letter-spacing:-.04em}.subhero h1 i{display:none}.subhero p{margin:16px 0 0}
.detail-title h1{max-width:24em;font-weight:600;font-size:clamp(28px,3.5vw,59px);line-height:1.38;letter-spacing:.005em}.detail-meta{color:var(--muted);margin-bottom:10px;font-size:16px}.detail-meta span{padding-inline:5px}
.reading{width:min(var(--page),860px);margin:clamp(40px,5.5vw,92px) auto clamp(54px,7vw,120px)}
.reading p{font-size:17px;line-height:1.95;font-weight:500}.reading .lead{margin-top:0;font-size:clamp(20px,1.9vw,29px);line-height:1.75;font-weight:600}
.detail-photo{margin:32px 0}.detail-photo img{width:100%;height:auto;max-height:580px;object-fit:contain;object-position:left center}.detail-photo figcaption{font-size:13px;margin-top:8px}
.references,.related,.end-nav{border-top:1px solid var(--line);padding-top:20px;margin-top:40px}.references h2,.related>span,.end-nav small{display:block;font-size:14px;color:var(--muted);margin:0 0 10px;font-weight:500}.references a,.related a{display:table;margin:8px 0;font-size:16px;font-weight:600}
.end-nav{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:15px}.end-nav a:last-child{text-align:right;max-width:70%}.index-list{padding-bottom:clamp(50px,7vw,120px)}
@media(max-width:800px){.hero-band-inner{gap:20px}.hero h1{font-size:clamp(58px,8vw,78px)}.hero nav{gap:clamp(15px,3vw,30px)}.about-grid{gap:5vw}.bio .profile-text{font-size:15px}.record{grid-template-columns:104px 1fr}}
@media(max-width:680px){
  :root{--dock-height:62px;--anchor:76px}.reel picture{width:100vw}.reel img{object-position:52% center}
  .hero-band{min-height:28%;padding:23px 16px}.hero-band-inner{width:100%;display:block}.hero h1{font-size:clamp(52px,13vw,81px);line-height:.89}
  .hero nav{justify-content:space-between;margin-top:22px;gap:8px;padding:0}.hero nav a{font-weight:510;font-size:clamp(16px,4.45vw,24px)}
  .dock-inner{width:calc(100% - 32px)}.dock-name{font-size:20px}.dock nav{gap:clamp(8px,3vw,18px)}.dock nav a{font-weight:540;font-size:clamp(13px,3.45vw,19px)}
  .about-grid{grid-template-columns:1fr;gap:25px}.portrait{width:min(100%,420px)}.bio .profile-text{line-height:1.9}.bio h3{margin:.12em 0 .42em}
  .record{grid-template-columns:1fr;align-content:center;gap:5px;padding:16px 0}.record-date{font-size:15px}
  .footer-inner{grid-template-columns:1fr}.footer-right{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px}
  .page-footer nav{width:100%;justify-content:space-between;gap:8px;padding-bottom:12px}
  .social,.footer-right small{padding:0;border:0;align-self:center}.social{gap:5px}.social a{width:30px}.social img{width:20px;height:20px}.footer-right small{font-size:13px}
  .reading p{font-size:16px}.contact{padding-inline:14px}
}
@media(prefers-reduced-motion:reduce){.filmstrip{animation:none}}

.profile-text, .record-info, .org-copy, .career-card-body strong, .detail-title h1,
.subhero p, .reading {
  font-family: "Baskervville Text", var(--gothic);
}
.career-card-body small, .career-card-body strong:lang(en), .org-copy h3:lang(en) {
  font-family: var(--type);
}

/* The document scrolls between panels. A panel taller than the viewport remains readable in full. */
html.portfolio-home {
  --panel-inset: max(var(--gutter), calc((100% - 1536px) / 2));
  --panel-top: calc(var(--dock-height) + clamp(24px, 4.2vh, 66px));
  --panel-tail: clamp(35px, 6vh, 92px);
  scroll-snap-type: none;
  scroll-padding-block: 0;
}
.home :is(.hero, .about, .news, .career, .contact, .page-footer) {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 100vh;
  min-height: 100dvh;
}
.home :is(.about, .news, .career, .contact) {
  width: 100%;
  scroll-margin-top: 0;
}
.home :is(.about, .news) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--panel-top) var(--panel-inset) var(--panel-tail);
}
.home .career { padding: var(--panel-top) 0 var(--panel-tail); }
.home .career > h2, .home .career-tree { width: var(--page); margin-inline: auto; }
.career-entry { scroll-margin-top: var(--anchor); }
.home .contact { padding-block: var(--panel-top) var(--panel-tail); }
.home .page-footer {
  display: grid;
  align-content: center;
  padding-top: var(--panel-top);
}
.home :where(a, input, textarea, [tabindex]):focus-visible { scroll-margin-top: var(--anchor); }
@media (prefers-reduced-motion: reduce) {
  html.portfolio-home { scroll-snap-type: none; }
}

@media (max-width: 360px) {
  .dock-inner { width: calc(100% - 24px); }
  .dock nav { gap: 8px; }
}

.career-entry, .reading:has(.career-cards), .dock, .career-group {
  touch-action: pan-y pinch-zoom;
}
.career-cards[tabindex] { touch-action: pan-x pan-y pinch-zoom; }
@media (hover: hover) and (pointer: fine) {
  :where(a[href], summary, button:enabled):hover { opacity: .75; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :where(a[href], summary, button:enabled) { transition: opacity 160ms ease-out; }
}

.bio .social { justify-content: flex-start; padding: 0; margin: 20px 0 0 -5px; }
.bio .social a { width: 36px; }
.course-note { grid-column: 1 / -1; margin: 0; font-family: var(--type); font-size: 15px; line-height: 1.75; }
.contact h2 { margin-bottom: 16px; }
.contact-copy { margin: 0 auto 32px; font-family: var(--gothic); font-size: clamp(15px,1.15vw,19px); }
.archive { padding-top: clamp(54px,7vw,116px); }
.archive h1 { margin: 0 0 clamp(24px,3.5vw,58px); font: 400 clamp(52px,6.4vw,104px)/1.03 var(--type); letter-spacing: -.053em; }
.news-button { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-height: 48px; margin-top: clamp(24px,3vw,44px); padding: 10px 28px; border: 1px solid #fff; background: transparent; color: #fff; font: 550 15px/1.5 var(--gothic); }
.news-story { width: min(var(--page),820px); margin: 0 auto; padding: clamp(44px,6vw,92px) 0 clamp(64px,7vw,120px); }
.news-dateline { margin: 0 0 18px; font: 400 clamp(16px,1.4vw,22px)/1.55 var(--type); }
.news-dateline time, .record-date { font-family: var(--gothic); font-size: clamp(13px,1.12vw,18px); }
.news-story h1 { margin: 0; font: 600 clamp(26px,3vw,48px)/1.48 "Baskervville Text",var(--gothic); }
.news-story figure { margin: clamp(24px,3vw,42px) 0; }
.news-story figure img { width: 100%; height: auto; max-height: min(65svh,600px); object-fit: contain; object-position: left center; }
.news-body { margin: 0; font: 500 clamp(16px,1.2vw,20px)/1.95 "Baskervville Text",var(--gothic); }
.inline-source { white-space: nowrap; font-weight: 650; }
.outbound { display: inline-block; margin-left: .2em; font: 400 .9em/1 var(--gothic); }
@media (max-width:680px) {
  .course-note { width:100%; }
  .contact-copy { padding-inline: 8px; }
  .hero nav { column-gap: clamp(12px,4vw,26px); }
}

/* The same four links stay in the upper right as the page moves underneath them. */
.dock-slot, .inner .dock-slot {
  position: fixed;
  inset: max(12px,env(safe-area-inset-top)) max(14px,1.4vw,env(safe-area-inset-right)) auto auto;
  z-index: 22;
  width: max-content;
  height: auto;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(17px,2.6vw,46px);
  padding: 0;
}
.site-nav a { display: grid; align-items:center; min-height: 38px; font: 550 clamp(16px,1.35vw,24px)/1.25 var(--type); }
.inner main { padding-top: max(74px,calc(env(safe-area-inset-top) + 62px)); }
.inner .news-story { padding-top: clamp(95px,10vw,150px); }
.inner main:has(> .news-story) { padding-top:0; }
.hero-band-inner { width:100%; }
.dock-slot a:focus-visible { outline-offset: 2px; }
@media (max-width:680px) {
  .dock-slot,.inner .dock-slot { right:max(10px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top)); }
  .site-nav { gap:clamp(14px,4vw,23px);padding:0; }
  .site-nav a { font-size:clamp(15px,4vw,21px);min-height:38px; }
}

.contact-form {
  display:grid;grid-template-columns: repeat(2,minmax(0,1fr));gap:24px 26px;
  width:min(100%,840px);margin:0;text-align:left;
  font: 500 16px/1.65 var(--gothic);
}
.contact-form > label { display:grid;gap:7px; }
.contact-form :is(input:not([type=checkbox]),textarea) {
  width:100%;min-width:0;min-height:48px;border:1px solid rgb(255 255 255 / .7);
  border-radius:0;background:transparent;color:#fff;caret-color:#fff;
  padding:10px 13px;font:400 16px/1.6 var(--gothic);
}
.contact-form textarea { resize:vertical; }
.form-message,.consent,.form-actions { grid-column:1/-1; }
.consent,.form-actions { display:flex;gap:12px;align-items:center;flex-wrap:wrap; }
.consent input { margin:0;width:20px;height:20px;accent-color:#1b3d98; }
.consent a { font-weight:700; }
.form-actions .news-button { min-width:140px; margin:0; color:white; cursor:not-allowed; }
.form-actions p { margin:0;font-size:13px;line-height:1.6; }
.contact-form :is(input,textarea):focus-visible { outline:3px solid white;outline-offset:3px; }
@media (max-width:600px) {
  .contact-form { grid-template-columns:1fr;gap:18px;padding-inline:8px; }
}


@media (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  html.portfolio-home { scroll-snap-type: y proximity; }
  html.portfolio-home:is([data-travelling], :has(.career-disclosure[open]), :has(.contact-form:focus-within)) { scroll-snap-type:none; }
}
.career-project { margin-top:clamp(44px,6vw,80px);scroll-margin-top:var(--anchor); }
.career-project-head { display:flex;gap:18px;align-items:center;flex-wrap:wrap; }
.career-project-head :is(h4,p) { margin:0; }
.career-project-title { font-size:clamp(22px,2vw,32px); }
.career-project-head .org-logo { order:0; }
.career-project-role,.career-project-period { font-size:15px;line-height:1.65; }
.career-project-period { font-family:var(--gothic); }
.career-project > .career-intro { margin-top:14px; }
.career-group h5 { margin:0 0 12px;font-size:clamp(15px,1.22vw,20px); }
.career-card { position:relative; }
.career-external { position:absolute;right:16px;bottom:14px;color:white;font:400 20px/1 var(--gothic); }
.career-card-body { padding-right:48px; }
.news-story h1 { text-wrap: balance; }
.news-story header + .news-body { margin-top: clamp(18px,2vw,28px); }
.news-story figure + .news-button { margin-top:0; }


html.portfolio-home:not([data-past-hero]) .dock-slot { visibility:hidden; pointer-events:none; }
.home .contact { text-align:left; border:0; padding-inline:var(--panel-inset); }
.contact-copy { margin-inline:0; padding-inline:0; }
.contact-form { padding-inline:0; }
.consent input { appearance:none; display:grid; place-content:center; background:transparent; border:1px solid #fff; border-radius:0; }
.consent input:checked::after { content:""; width:10px;height:6px;border:solid white;border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg); }
.source-line { margin:.7em 0 0; }
.external-icon { display:inline-block; width:1em; height:1em; vertical-align:-.08em; }
.inline-source .external-icon { margin-inline-start:.3em; }