:root{--paper:#faf9f6;--ink:#272725;--muted:#615d58;--meta:#514b46;--accent:#702a36;--rule:#d7d3cb;--tint:#f2eeea;--serif:EditorialSerif,'Songti SC',serif;--sans:EditorialSans,'PingFang SC',sans-serif;--latin:EditorialLatin,Georgia,serif;--gutter:clamp(24px,4.45vw,72px);--ease:cubic-bezier(.16,1,.3,1);--bar-h:56px}

/* Base */
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);scroll-behavior:smooth;line-break:strict;scroll-padding-top:calc(var(--bar-h) + 16px)}
body{margin:0;font:400 17px/1.75 var(--sans);-webkit-font-smoothing:antialiased;font-synthesis:none}
h1,h2,h3,p,figure,ol,ul{margin:0}
ol,ul{list-style:none;padding:0}
h1,h2,h3{font-family:var(--serif);font-weight:500}
a{color:inherit;text-decoration:none;transition:color .18s var(--ease)}
a:hover{text-decoration:underline;text-underline-offset:5px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
img{display:block;width:100%;height:auto}
::selection{background:var(--accent);color:var(--paper)}
.wrap{max-width:1600px;margin-inline:auto;padding-inline:var(--gutter)}
.phrase{white-space:nowrap}
.arrow{font-family:var(--sans);font-weight:400;margin-left:12px;font-size:1em}
.skip-link{position:fixed;top:8px;left:8px;z-index:20;padding:10px 16px;background:var(--paper);transform:translateY(-200%)}
.skip-link:focus{transform:none}
.text-link{display:inline-flex;align-items:center;min-height:44px;font-size:14px;white-space:nowrap}
.text-link .arrow{margin-left:22px}
/* Press feedback lives on block-level targets, where transform applies. */
.research-name,.text-link,.degree-link,.degree-short,.field-index-link,.statement-link,.row{transition:transform .15s var(--ease)}
.research-name:active,.text-link:active,.degree-link:active,.degree-short:active,.field-index-link:active,.statement-link:active,.row:has(.row-link:active){transform:translateY(1px)}

/* Whole-row links: one readable link per row, stretched over the row; the arrow appears on hover or focus. */
.row{position:relative}
.row-link::after{content:'';position:absolute;inset:0;z-index:1}
@supports selector(:has(a)){.row-link:focus-visible{outline:none}.row:has(.row-link:focus-visible){outline:2px solid var(--accent);outline-offset:6px}}
.row:hover .row-link{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.row .arrow{display:inline-block;margin-left:10px;opacity:0;transform:translateX(-6px);transition:opacity .18s var(--ease),transform .18s var(--ease)}
.row:hover .arrow,.row:focus-within .arrow{opacity:1;transform:none}
@media(hover:none){.row .arrow{display:none}}

/* First screen: identity, plate and the four fields close on one complete unit. */
.masthead{text-align:center;border-top:1px solid var(--rule);padding:18px 0 12px}
.masthead h1{font-weight:600;font-size:clamp(70px,6.5vw,108px);line-height:1.15;letter-spacing:.11em;padding-left:.11em;color:var(--accent)}
.dept-en{margin-top:8px;font:400 14px/1.6 var(--latin);letter-spacing:.065em}
.hero-statement{max-width:72em;margin:12px auto 0;font-size:15px;line-height:1.75;color:var(--muted);text-wrap:balance}
.statement-link{display:inline-flex;align-items:center;min-height:32px;margin-left:14px;color:var(--accent);white-space:nowrap}
.statement-link .arrow{margin-left:8px}
.admissions-short{display:flex;justify-content:center;align-items:center;gap:25px;margin-top:6px;font-size:15px}
.admissions-short>span{color:var(--muted)}
.degree-short{display:flex;align-items:center;min-height:44px;font-weight:500}
.degree-short .arrow{font-size:20px}

/* The plate keeps the model's own coordinate space, so the field map stays registered at every width.
   Its height yields to the viewport so the four fields close the first screen; the window centres on model y≈485
   (tower, runway, viaduct and the right-hand rail) and never runs past the image edges. */
.hero-plate{--plate-h:clamp(200px,min(26vw,100vh - 545px),360px);position:relative;height:var(--plate-h);overflow:hidden;background:#eeede8}
.plate-canvas{position:relative;aspect-ratio:3/2;margin-top:min(0px,max(calc(var(--plate-h)/2 - 31.576%),calc(var(--plate-h) - 66.667%)))}
.plate-canvas img,.plate-map{position:absolute;inset:0;width:100%;height:100%}
.plate-map{pointer-events:none}
.zone{opacity:0;transition:opacity .22s var(--ease)}
.veil{fill:var(--paper);fill-opacity:.55}
.edge,.flight,.pad{stroke:var(--accent);stroke-width:1.5;vector-effect:non-scaling-stroke}
.edge,.flight{fill:none}
.flight{stroke-dasharray:5 6}
.pad{fill:var(--paper)}
.plate-label{position:absolute;padding:1px 9px;background:var(--paper);border:1px solid var(--accent);color:var(--accent);font:500 15px/1.6 var(--serif);white-space:nowrap;transform:translate(-50%,-100%);opacity:0;transition:opacity .22s var(--ease)}
.plate-label[data-zone="road"]{left:16.9%;top:41%}
.plate-label[data-zone="rail"]{left:76.8%;top:58.6%}
.plate-label[data-zone="airport"]{left:71.6%;top:43%}
.plate-label[data-zone="lowalt"]{left:52.1%;top:45.9%}
.hero-plate[data-active="road"] [data-zone="road"],.hero-plate[data-active="rail"] [data-zone="rail"],.hero-plate[data-active="airport"] [data-zone="airport"],.hero-plate[data-active="lowalt"] [data-zone="lowalt"]{opacity:1}

.research-index{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:22px;padding:18px 0 16px;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.research-item{padding:0 25px;border-left:1px solid var(--rule)}
.research-item:first-child{padding-left:0;border-left:0}
.research-item:last-child{padding-right:0}
.research-name{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:44px}
.research-name:hover{text-decoration:none;color:var(--accent)}
.research-name h2{font-size:28px;line-height:1.4;white-space:nowrap}
.research-name .arrow{margin:0;font-size:23px;transition:transform .18s var(--ease)}
.research-name:hover .arrow,.research-name:focus-visible .arrow{transform:translateX(4px)}
.research-item p{min-height:50px;margin-top:6px;font-size:14px;line-height:1.8;color:var(--muted)}

/* Chapters */
.chapter{padding-block:78px}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:36px;padding-top:24px;border-top:1px solid var(--ink)}
.chapter-title{overflow:hidden;color:var(--accent);font-size:42px;line-height:1.4}
.chapter-title>span{display:block}
.section-head .text-link{color:var(--accent);font-size:15px;font-weight:500}
/* Title reveal: the only scroll motion. Its hidden state exists only once the head script confirms motion is wanted. */
.js.motion .chapter-title>span{transform:translateY(100%);transition:transform .48s var(--ease)}
.js.motion .chapter-title.is-in>span{transform:none}
/* News: lead, second and list form three levels. */
.news-section{padding-top:80px;padding-bottom:60px}
.news-spread{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:48px}
.news-photo{overflow:hidden;aspect-ratio:2/1;background:var(--tint)}
.news-photo img{height:100%;object-fit:cover;object-position:50% 90%}
.news-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-size:14px;line-height:1.6;color:var(--meta)}
.news-meta time,.notice time{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--meta);font-variant-numeric:tabular-nums;white-space:nowrap}
.source,.notice-source{font-size:14px;line-height:1.6;color:var(--meta)}
.news-lead .news-meta{margin-top:23px}
.news-lead h3{margin-top:11px;font-size:27px;line-height:1.6;text-wrap:pretty}
.news-lead .source{margin-top:12px}
.news-column{padding-left:32px;border-left:1px solid var(--rule)}
.news-entry{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--rule)}
.news-entry:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.news-entry h3{margin-top:8px;font-size:18px;line-height:1.7}
.news-entry:first-child{margin-bottom:24px;padding-bottom:24px}
.news-entry:first-child h3{margin-top:10px;font-size:23px;line-height:1.6}

/* Academic: first chapter after the first screen; an empty slot until the department publishes. */
.academic-section{padding-bottom:40px}
.empty-slot{padding:22px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:16px;color:var(--muted)}

/* Faculty: three admissions directions, names only, no featured person. */
.faculty-lead{margin-bottom:30px;font-size:15px;color:var(--muted)}
.directions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.direction{padding-top:18px;border-top:1px solid var(--ink)}
.direction h3{display:flex;align-items:baseline;gap:14px;font-size:24px;line-height:1.5;color:var(--accent)}
.direction-code{font:400 22px/1 var(--latin)}
.direction-people{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:16px}
.direction-people a,.direction-people span{display:inline-flex;align-items:center;min-height:36px;font:400 17px/1.6 var(--serif)}
.faculty-index{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;margin-top:40px;padding-top:20px;border-top:1px solid var(--rule)}
.faculty-index>p{font:400 18px/1.6 var(--serif);color:var(--muted)}
.faculty-index nav{display:flex;flex-wrap:wrap;gap:8px 28px}
.field-index-link{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);font:400 20px/1.5 var(--serif)}
.field-index-link .arrow{font-size:16px;margin-left:10px}

/* Admissions */
.admissions-section{background:var(--tint)}
.degree-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;margin-bottom:36px}
.degree-paths h3{font-size:32px;line-height:1.5}
.degree-paths p{margin-top:9px;font-size:16px;color:var(--muted)}
.degree-link{display:inline-flex;align-items:center;gap:18px;min-height:44px;margin-top:17px;border-bottom:1px solid var(--accent);color:var(--accent);font-size:15px}
.degree-link .arrow{margin-left:0}
.notice{display:grid;grid-template-columns:110px minmax(0,1fr) 190px;gap:25px;align-items:baseline;padding:18px 0;border-top:1px solid var(--rule)}
.notice .row-link{font-size:17px;line-height:1.8}
.notice-source{text-align:right;white-space:nowrap}
.notice-note{padding-top:15px;border-top:1px solid var(--rule);font-size:13px;line-height:1.7;color:var(--muted)}

/* About: the department text as published, leadership beside it. */
.about-spread{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:64px;align-items:start}
.about-text p{max-width:46em;font-size:17px;line-height:1.95}
.about-text p+p{margin-top:18px}
.leaders{padding-top:18px;border-top:1px solid var(--ink)}
.leaders h3{font-size:24px;line-height:1.5;color:var(--accent)}
.leader-row{display:grid;grid-template-columns:80px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--rule)}
.leader-row dt{padding-top:20px;font-size:14px;line-height:1.6;color:var(--muted)}
.leader-row dd{display:grid;gap:16px;margin:0}
.leader-row .leader-link{display:flex;align-items:center;gap:12px;min-width:0;font:400 18px/1.6 var(--serif)}
.leader-row .leader-photo{flex:none;width:56px;height:70px;object-fit:cover}
.leader-row .leader-name{white-space:nowrap}

/* History: reading content, not navigation. */
.history-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px}
.history-item{padding-top:22px;border-top:1px solid var(--rule)}
.history-year{min-height:54px;font:400 36px/1.3 var(--latin);color:var(--accent)}
.history-item p+p{margin-top:13px;font-size:16px;line-height:1.85}

@media(max-width:1100px){
  .news-spread{gap:32px}
  .news-column{padding-left:26px}
  .notice{grid-template-columns:105px minmax(0,1fr) 170px;gap:20px}
}
@media(max-width:900px){
  .masthead h1{font-size:72px}
  .hero-plate{--plate-h:clamp(220px,30vw,300px)}
  .research-index{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px}
  .research-item:nth-child(2n+1){padding-left:0;border-left:0}
  .research-item:nth-child(2n){padding-right:0}
  .research-item p{min-height:0}
  .chapter{padding-block:60px}
  .news-spread{grid-template-columns:1.25fr 1fr;gap:28px}
  .news-column{padding-left:22px}
  .news-photo{aspect-ratio:3/2}
  .news-lead h3{font-size:23px}
  .news-entry:first-child h3{font-size:20px}
  .directions{grid-template-columns:1fr;gap:28px}
  .about-spread{grid-template-columns:1fr;gap:36px}
  .degree-paths{gap:40px}
  .history-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
}
@media(max-width:650px){
  :root{--gutter:24px;--bar-h:52px}
  .masthead{padding:22px 0 14px}
  .masthead h1{font-size:clamp(43px,12.3vw,61px);letter-spacing:.04em;padding-left:.04em;white-space:nowrap}
  .dept-en{max-width:320px;margin:9px auto 0;font-size:12px;line-height:1.7;letter-spacing:.025em}
  .hero-statement{margin-top:12px;font-size:14px;line-height:1.8;text-align:left}
  .statement-link{margin-left:10px}
  .admissions-short{gap:23px;margin-top:4px;font-size:14px}
  .hero-plate{--plate-h:215px;margin-inline:calc(var(--gutter)*-1)}
  .plate-map,.plate-labels{display:none}
  .research-index{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 16px;margin-top:22px;padding:14px 0 16px}
  .research-item{padding:0;border-left:0}
  .research-name{min-height:44px;gap:8px}
  .research-name h2{font-size:25px}
  .research-name .arrow{font-size:19px}
  .research-item p{min-height:48px;margin-top:4px;font-size:14px;line-height:1.7}
  .chapter{padding-block:47px}
  .section-head{align-items:baseline;gap:15px;margin-bottom:25px;padding-top:19px}
  .chapter-title{font-size:32px;white-space:nowrap}
  .section-head .text-link{min-height:44px;font-size:14px}
  .section-head .text-link .arrow{margin-left:11px}
  .news-section{padding-top:38px}
  .news-spread{display:block}
  .news-photo{aspect-ratio:16/10}
  .news-photo img{object-position:50% 85%}
  .news-lead .news-meta{margin-top:17px}
  .news-lead h3{margin-top:10px;font-size:23px;line-height:1.65}
  .news-lead .source{margin-top:9px}
  .news-column{margin-top:28px;padding:22px 0 0;border-left:0;border-top:1px solid var(--rule)}
  .news-entry,.news-entry:first-child{margin-bottom:16px;padding-bottom:16px}
  .news-entry:first-child h3{font-size:20px;line-height:1.65}
  .news-entry h3{font-size:18px}
  .news-entry:nth-child(n+4){display:none}
  .news-entry:nth-child(3){margin-bottom:0;padding-bottom:0;border-bottom:0}
  .faculty-lead{margin-bottom:22px;font-size:14px}
  .direction h3{font-size:21px;gap:10px}
  .direction-people{gap:0 16px}
  .faculty-index{display:block;margin-top:30px}
  .faculty-index nav{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
  .field-index-link{font-size:18px}
  .about-text p{font-size:16px;line-height:1.9}
  .degree-paths{grid-template-columns:1fr;gap:28px;margin-bottom:30px}
  .degree-paths article+article{padding-top:24px;border-top:1px solid var(--rule)}
  .degree-paths h3{font-size:29px}
  .degree-paths p{margin-top:7px;font-size:15px}
  .degree-link{margin-top:12px;font-size:14px}
  .notice{grid-template-columns:1fr auto;gap:8px 15px}
  .notice time{grid-column:1;grid-row:1}
  .notice-source{grid-column:2;grid-row:1}
  .notice .row-link{grid-column:1/-1;grid-row:2;font-size:16px}
  .history-grid{grid-template-columns:1fr;gap:22px}
  .history-item{display:grid;grid-template-columns:72px minmax(0,1fr);gap:18px;align-items:start;padding-top:20px}
  .history-year{min-height:0;font-size:24px}
  .history-item p+p{margin:0;font-size:15px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
html[data-motion="reduced"]{scroll-behavior:auto}
html[data-motion="reduced"] *,html[data-motion="reduced"] *::before,html[data-motion="reduced"] *::after{transition:none!important;animation:none!important}