:root {
  --bg: #070b0f;
  --bg2: #090e13;
  --text: #f5f4f0;
  --muted: #a9adb0;
  --muted2: #767d82;
  --line: rgba(255,255,255,.14);
  --line2: rgba(255,255,255,.08);
  --accent: #77d6e7;
  --pad: clamp(28px, 3.3vw, 68px);
  --latin: "Manrope", "Helvetica Neue", sans-serif;
  --display: "Archivo Black", "Helvetica Neue", sans-serif;
  --zh: "PingFang TC", "Hiragino Sans GB", "Noto Sans TC", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-width: 320px; background: linear-gradient(#070b0f,#090d12); color: var(--text); font-family: var(--zh); -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; background: #111820; }
::selection { background: var(--accent); color: #061015; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #070b0f; }
::-webkit-scrollbar-thumb { background: #3c454b; border: 3px solid #070b0f; border-radius: 999px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.skip-link { position: fixed; z-index: 200; left: 16px; top: 12px; padding: 10px 14px; background: var(--text); color: var(--bg); transform: translateY(-180%); transition: transform .18s ease; }
.skip-link:focus { transform: none; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 100; height: 68px; display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 0 var(--pad); transition: background .25s ease, border-color .25s ease; border-bottom: 1px solid transparent; }
.site-header.is-scrolled { background: rgba(7,11,15,.96); border-color: var(--line2); }
.site-nav { position:absolute; left:50%; transform:translateX(-50%); display:flex; gap:clamp(28px,3.2vw,58px); }
.site-nav a { position: relative; font-size: 14px; font-weight: 500; letter-spacing: .055em; padding: 18px 0; }
.site-nav a::after { content:""; position:absolute; left:0; bottom:10px; width:100%; height:1px; background:var(--text); transform:scaleX(0); transform-origin:left; transition:transform .2s ease; }
.site-nav a:hover::after { transform: scaleX(1); }
.header-meta { display:flex; align-items:center; gap:22px; }
.header-meta>span { font: 500 10px/1 var(--latin); letter-spacing:.08em; color:#d8dcde; }
.menu-trigger { width:30px; height:30px; padding:5px 0; display:grid; align-content:center; gap:5px; background:none; border:0; cursor:pointer; }
.menu-trigger i { display:block; width:26px; height:1px; background:#fff; }
.mobile-menu { position:fixed; z-index:90; inset:68px 0 auto; display:none; background:rgba(7,11,15,.98); border-bottom:1px solid var(--line); padding:18px var(--pad) 24px; }
.mobile-menu[aria-hidden="false"] { display:block; }
.mobile-menu nav { display:grid; }
.mobile-menu nav a { font-size:26px; padding:15px 0; border-bottom:1px solid var(--line2); }
.mobile-menu-meta { margin-top:22px; font:500 10px/1 var(--latin); letter-spacing:.1em; color:var(--muted); }

.hero { position:relative; min-height: min(830px, 81svh); overflow:hidden; background:#0a1118; }
.hero-photo { position:absolute; inset:0; z-index:0; object-position:center 48%; }
.hero-shade { position:absolute; inset:0; z-index:1; background: linear-gradient(90deg, rgba(5,8,12,.85) 0%, rgba(5,8,12,.58) 28%, rgba(5,8,12,.13) 58%, rgba(5,8,12,.24) 100%), linear-gradient(180deg, rgba(0,0,0,.05), rgba(5,8,12,.35)); }
.hero-content { position:relative; z-index:2; min-height:inherit; display:grid; grid-template-columns:1fr auto; align-items:end; padding: 112px var(--pad) 46px; }
.hero-copy { width:min(560px, 48vw); }
.disciplines { width:max-content; margin-bottom:30px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.45); font:600 13px/1.34 var(--latin); letter-spacing:.13em; }
.hero h1 { margin:0; width:max-content; font-family:var(--display); font-size:clamp(64px, 6vw, 96px); line-height:.79; letter-spacing:-.035em; color:transparent; background-image:var(--hero-photo), linear-gradient(135deg,#ecebe6 0%,#6f7b83 48%,#e7d8c8 100%); background-size:2000px auto, 100% 100%; background-position:10% 48%; -webkit-background-clip:text; background-clip:text; -webkit-text-stroke:1px rgba(255,255,255,.72); filter:drop-shadow(0 8px 16px rgba(0,0,0,.35)); }
.hero-zh { margin:24px 0 7px; font-size:clamp(25px, 2vw, 34px); font-weight:500; letter-spacing:.06em; }
.hero-en { margin:0; font:500 16px/1 var(--latin); letter-spacing:.17em; color:#dedfdd; }
.arrow-link { display:inline-flex; align-items:center; gap:17px; padding-bottom:10px; border-bottom:1px solid currentColor; font-weight:500; }
.arrow-link span { transition:transform .2s ease; }
.arrow-link:hover span { transform:translateX(6px); }
.hero-link { margin-top:36px; font:500 12px/1 var(--latin); letter-spacing:.08em; }
.hero-side { display:flex; height:64%; flex-direction:column; justify-content:space-between; align-items:flex-end; padding:20px 0 0; }
.slide-count { display:grid; justify-items:center; gap:10px; font:500 14px/1 var(--latin); }
.slide-count i { width:1px; height:70px; background:rgba(255,255,255,.65); }
.coordinates { font:500 10px/1.3 var(--latin); letter-spacing:.07em; text-align:right; }

.section { padding: 34px var(--pad) 0; }
.section-title-row { min-height:54px; display:grid; grid-template-columns:auto minmax(30px,1fr) auto; align-items:center; gap:20px; }
.section-title-row.compact { min-height:48px; }
.section-title-row h2 { margin:0; font:500 clamp(17px, 1.4vw, 24px)/1 var(--latin); letter-spacing:.07em; }
.rule { width:48px; height:1px; background:rgba(255,255,255,.55); }
.view-all { justify-self:end; font:500 10px/1 var(--latin); letter-spacing:.1em; color:#e8e9e7; }
.view-all span { margin-left:8px; }
.work-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.work-item figure { margin:0; aspect-ratio:1.25/1; overflow:hidden; background:#101820; }
.work-item img { transition: transform .45s cubic-bezier(.16,1,.3,1), filter .3s ease; }
.work-item:hover img { transform:scale(1.035); filter:brightness(1.05); }
.work-caption { display:flex; justify-content:space-between; align-items:start; gap:12px; padding:10px 1px 0; }
.work-caption h3 { margin:0 0 6px; font:500 clamp(14px,1.2vw,19px)/1.15 var(--latin); }
.work-caption p { margin:0; font:500 9px/1 var(--latin); letter-spacing:.09em; color:var(--muted); }
.work-caption b { font-weight:400; padding:0 9px; color:#70787c; }
.work-caption>span { padding-top:2px; transition:transform .2s ease; }
.work-item:hover .work-caption>span { transform:translateX(4px); }

.two-column { display:grid; grid-template-columns:1.05fr .95fr; gap:54px; padding-top:52px; padding-bottom:42px; }
.services { padding-left:34px; border-left:1px solid var(--line); }
.event-list, .service-list { margin-top:5px; }
.event-row { display:grid; grid-template-columns:58px 92px minmax(0,1fr) 20px; gap:14px; align-items:center; min-height:90px; border-bottom:1px solid var(--line); }
.event-row:first-child { border-top:0; }
.event-row time { font-family:var(--latin); color:var(--muted); }
.event-row time span, .event-row time small { display:block; font-size:9px; letter-spacing:.08em; }
.event-row time strong { display:block; margin:2px 0; font-size:27px; line-height:.92; font-weight:400; color:#8c9296; }
.event-row figure { margin:0; width:92px; height:58px; overflow:hidden; }
.event-row img { transition:transform .3s ease; }
.event-row:hover img { transform:scale(1.05); }
.event-copy { display:grid; gap:6px; min-width:0; }
.event-copy strong { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px; font-weight:500; }
.event-copy span { font-size:12px; color:var(--muted); }
.row-arrow { justify-self:end; transition:transform .2s ease; }
.event-row:hover .row-arrow, .service-row:hover .row-arrow { transform:translateX(5px); }
.service-row { display:grid; grid-template-columns:64px 1fr 20px; align-items:center; gap:12px; min-height:90px; border-bottom:1px solid var(--line); }
.service-no { position:relative; font:400 30px/1 var(--latin); color:#737b80; }
.service-no::after { content:""; position:absolute; left:0; bottom:-16px; width:35px; height:1px; background:#697177; }
.service-row div { display:grid; gap:8px; }
.service-row strong { font-size:19px; font-weight:500; letter-spacing:.03em; }
.service-row div span { font-size:12px; color:var(--muted); }

.about { display:grid; grid-template-columns:1.03fr .88fr 1.03fr; min-height:340px; border-top:1px solid var(--line2); border-bottom:1px solid var(--line2); }
.about figure { margin:0; min-height:340px; overflow:hidden; }
.about-photo img { object-position:center 48%; }
.about-copy { display:flex; flex-direction:column; justify-content:center; padding:34px 44px; background:linear-gradient(135deg,#0b1116,#080c10); }
.about-label { display:flex; align-items:center; gap:14px; margin-bottom:17px; font:500 10px/1 var(--latin); letter-spacing:.1em; }
.about-label span { width:34px; height:1px; background:#92999d; }
.about-copy h2 { margin:0 0 22px; font-size:clamp(27px,2.5vw,43px); line-height:1.38; font-weight:500; letter-spacing:.04em; }
.about-copy p { margin:0; max-width:30em; color:#babec0; font-size:13px; line-height:1.85; }
.about-copy .arrow-link { width:max-content; margin-top:28px; font-size:13px; }
.about-landscape { position:relative; }
.about-landscape::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,8,12,.18),rgba(5,8,12,.45)); }
.about-landscape figcaption { position:absolute; z-index:2; right:14%; top:34%; transform:rotate(-12deg); font:italic 24px/1.2 Georgia,serif; color:rgba(255,255,255,.88); text-align:center; }

.footer { min-height:100px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:25px var(--pad); font:500 10px/1 var(--latin); color:#c3c6c7; }
.footer nav { display:flex; align-items:center; gap:26px; color:#d8dada; }

@media (max-width: 980px) {
  .header-meta>span { display:none; }
  .hero { min-height:760px; }
  .hero-copy { width:min(560px,70vw); }
  .work-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 12px; }
  .two-column { grid-template-columns:1fr; gap:50px; }
  .services { padding-left:0; border-left:0; }
  .about { grid-template-columns:1fr 1fr; }
  .about-landscape { display:none; }
}

@media (max-width: 680px) {
  :root { --pad:20px; }
  .site-header { height:58px; }
  .site-nav { display:none; }
  .header-meta { justify-self:end; }
  .mobile-menu { inset:58px 0 auto; }
  .hero { min-height:760px; }
  .hero-photo { object-position:58% center; }
  .hero-content { grid-template-columns:1fr; padding:98px var(--pad) 32px; }
  .hero-copy { width:100%; align-self:end; }
  .disciplines { margin-bottom:26px; font-size:11px; }
  .hero h1 { font-size:clamp(58px,20vw,83px); background-size:1200px auto; }
  .hero-zh { font-size:25px; margin-top:20px; }
  .hero-en { font-size:13px; }
  .hero-link { margin-top:30px; }
  .hero-side { position:absolute; right:var(--pad); bottom:32px; height:auto; }
  .slide-count { display:none; }
  .coordinates { font-size:8px; opacity:.65; }
  .section { padding-top:30px; }
  .section-title-row { grid-template-columns:auto 1fr auto; gap:12px; }
  .section-title-row h2 { font-size:15px; }
  .rule { width:28px; }
  .view-all { font-size:8px; }
  .work-grid { grid-template-columns:1fr 1fr; gap:22px 10px; }
  .work-caption { padding-top:8px; }
  .work-caption h3 { font-size:13px; }
  .work-caption p { font-size:8px; }
  .two-column { padding-top:42px; gap:42px; }
  .event-row { grid-template-columns:50px 72px 1fr 16px; gap:9px; min-height:80px; }
  .event-row figure { width:72px; height:50px; }
  .event-copy strong { font-size:12px; }
  .event-copy span { font-size:10px; }
  .service-row { grid-template-columns:50px 1fr 16px; min-height:84px; }
  .service-row strong { font-size:16px; }
  .service-row div span { font-size:10px; }
  .about { grid-template-columns:1fr; }
  .about-photo { aspect-ratio:1.15/1; min-height:0!important; }
  .about-copy { padding:38px var(--pad) 44px; }
  .about-copy h2 { font-size:31px; }
  .about-copy p { font-size:12px; }
  .footer { align-items:flex-start; flex-direction:column; min-height:135px; padding-top:32px; }
  .footer nav { flex-wrap:wrap; gap:15px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition-duration:0s!important; animation-duration:0s!important; }
}

@media (max-width: 520px) {
  .work-grid { grid-template-columns:1fr; gap:28px; }
  .work-item figure { aspect-ratio:1.34/1; }
  .work-caption h3 { font-size:15px; }
  .work-caption p { font-size:9px; }
}