﻿@import url("302c0d0bad5d-menu.css");
@font-face{font-family:EditorialSerif;src:url('63af50883524-serif.woff2?v=collegiate6') format('woff2');font-weight:200 900;font-display:swap}
@font-face{font-family:EditorialSans;src:url('dda18643aa79-sans.woff2?v=collegiate6') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:EditorialLatin;src:url('2a58a76e1b33-cinzel.woff2?v=collegiate6') format('woff2');font-weight:400 900;font-display:swap}
: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);--header-h:84px;--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,.menu-btn: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,.menu-btn,.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,.menu-btn: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}}

/* Header: full masthead at the top of the page, a compact bar that hides on the way down and returns on the way up. */
.site-header{position:relative;z-index:10;height:var(--header-h)}
.header-bar{background:var(--paper)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;height:var(--header-h)}
.site-header:not([data-state="top"]) .header-bar{position:fixed;top:0;left:0;right:0;border-bottom:1px solid var(--rule);transition:transform .22s var(--ease)}
.site-header[data-state="hidden"] .header-bar{transform:translateY(calc(-100% - 1px))}
.site-header.instant .header-bar{transition:none}
.site-header:not([data-state="top"]) .header-inner{height:var(--bar-h)}
.brand{color:var(--accent);flex-shrink:0}
.brand:hover{text-decoration:none}
.brand-cn{display:block;font:600 22px/1.4 var(--serif);letter-spacing:.045em}
.brand-en{display:block;font:500 11px/1.5 var(--latin);letter-spacing:.13em;margin-top:5px}
.site-header:not([data-state="top"]) .brand-cn{font-size:18px}
.site-header:not([data-state="top"]) .brand-en{display:none}
.desktop-nav{display:flex;gap:clamp(16px,1.85vw,29px);align-items:center;font-size:14px}
.desktop-nav a{position:relative;display:flex;align-items:center;min-height:44px;white-space:nowrap}
.desktop-nav a::after{position:absolute;bottom:4px;left:0;right:0;height:1px;background:var(--accent);content:'';transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
.desktop-nav a:hover,.desktop-nav a[aria-current]{text-decoration:none;color:var(--accent)}
.desktop-nav a:hover::after,.desktop-nav a[aria-current]::after{transform:scaleX(1)}
.menu-btn{display:none;align-items:center;gap:10px;min-height:44px;font:400 15px/1.5 var(--sans);cursor:pointer}
.menu-btn,.site-menu .menu-close{appearance:none;background:none;border:0;color:inherit;padding:0}
.menu-btn svg,.site-menu .menu-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4}
.menu-current{display:none;color:var(--muted)}
.menu-current::after{content:'·';margin-left:8px}
.site-header:not([data-state="top"]) .menu-current:not(:empty){display:inline}
.site-menu{--mark:var(--accent);--ink-2:var(--muted)}
.site-menu::backdrop{background:rgb(39 39 37 / 42%)}
.site-menu .menu-close{display:flex;align-items:center;justify-content:center;min-height:44px;cursor:pointer}
.site-menu .menu-title,.site-menu .menu-route a[aria-current]{color:var(--accent)}
@media(max-width:1023px){.desktop-nav{display:none}.menu-btn{display:flex}}

/* 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-program{margin-bottom:8px;color:var(--muted);font-size:14px}
.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 .faculty-name{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{font-size:14px;line-height:2.1;color:var(--muted)}
.leader-row dd{display:flex;flex-wrap:wrap;gap:0 16px;margin:0}
.leader-row a{display:inline-flex;align-items:center;min-height:32px;font:400 18px/1.6 var(--serif)}

/* 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}

/* Footer: identity, platforms, contact. */
.site-footer{padding-block:50px 26px;background:var(--accent);color:var(--paper)}
.footer-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) minmax(0,1fr);gap:56px;padding-bottom:37px}
.footer-dept{font:500 38px/1.4 var(--serif);letter-spacing:.06em}
.footer-inst{margin-top:13px;font:500 18px/1.7 var(--serif)}
.footer-en{max-width:400px;margin-top:10px;font:400 12px/1.9 var(--latin);letter-spacing:.06em}
.footer-label{margin-bottom:14px;font:400 22px/1.6 var(--serif)}
.footer-platforms li{padding:7px 0;border-top:1px solid #ffffff2e;font-size:15px;line-height:1.7}
.footer-platforms li:first-child{border-top:0;padding-top:0}
.contact-data address{font-style:normal;font-size:16px;line-height:2}
.contact-data .text-link{margin-top:10px}
.recruit{margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid #ffffff2e}
.recruit-title{font:500 15px/1.7 var(--sans)}
.recruit-empty,.recruit-list{margin-top:4px;font-size:15px;line-height:1.8;opacity:.86}
.footer-nav{display:flex;flex-wrap:wrap;align-items:center;gap:15px 27px;padding-top:17px;border-top:1px solid #ffffff3a;font-size:13px}
.footer-link{display:flex;align-items:center;min-height:36px}
.to-top{display:flex;align-items:center;gap:20px;min-height:36px;margin-left:auto}
.site-footer a:focus-visible{outline-color:var(--paper)}

@media(max-width:1100px){
  .desktop-nav{gap:15px;font-size:13px}
  .brand-cn{font-size:21px}
  .news-spread{gap:32px}
  .news-column{padding-left:26px}
  .notice{grid-template-columns:105px minmax(0,1fr) 170px;gap:20px}
  .footer-top{grid-template-columns:1fr 1fr;gap:40px}
  .footer-id{grid-column:1/-1}
}
@media(max-width:900px){
  :root{--header-h:80px}
  .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}
  .footer-nav{gap:12px 20px}
}
@media(max-width:650px){
  :root{--gutter:24px;--header-h:76px;--bar-h:52px}
  .header-inner{gap:18px}
  .brand-cn{font-size:20px}
  .brand-en{margin-top:4px}
  .site-header:not([data-state="top"]) .brand-cn{font-size:17px}
  .menu-btn{gap:8px;font-size:14px}
  .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}
  .site-footer{padding-block:36px 22px}
  .footer-top{grid-template-columns:1fr;gap:28px;padding-bottom:27px}
  .footer-dept{font-size:34px}
  .footer-inst{margin-top:9px;font-size:17px}
  .footer-en{max-width:315px;font-size:11px;line-height:1.8;letter-spacing:.03em}
  .footer-label{margin-bottom:10px;font-size:21px}
  .contact-data address{font-size:15px}
  .footer-nav{display:grid;grid-template-columns:1fr 1fr;gap:8px 15px}
  .footer-link{min-height:44px}
  .to-top{grid-column:1/-1;margin:10px 0 0;min-height:44px;font-size:14px}
}
@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}
