:root { --ink:#1b2430; --text:#4b5563; --muted:#697586; --line:#d8dee6; --blue:#1f5fae; --nav-blue:#174d8d; --card:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:clip; scrollbar-width:none; }
html::-webkit-scrollbar { display:none; }
body { margin:0; min-height:100vh; overflow-x:clip; color:var(--ink); background:#f3f5f7; font-family:"Noto Sans TC",Arial,sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.42; background-image:linear-gradient(rgba(48,76,110,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(48,76,110,.045) 1px,transparent 1px); background-size:38px 38px; }
.shell { position:relative; max-width:1120px; min-height:100vh; margin:0 auto; padding:0 34px 28px; display:flex; flex-direction:column; }
.nav { position:sticky; z-index:30; top:0; min-height:64px; margin:0 calc(50% - 50vw); padding:0 34px; display:flex; align-items:center; justify-content:space-between; background:var(--nav-blue); }
.brand { display:inline-flex; align-items:center; gap:5px; color:#fff; text-decoration:none; font-size:0; }
.brand::before { content:""; width:44px; height:44px; display:block; background:url("image/mark_white.png") center / contain no-repeat; }
.brand::after { content:"Eric Yeh"; color:#fff; font:500 1.35rem/1 "Noto Sans TC",Arial,sans-serif; letter-spacing:-.02em; white-space:nowrap; }
.brand span { display:none; }
.nav-link,.text-link { color:#315f94; text-decoration:none; font-size:.9rem; }
.nav .nav-link { color:#dcecff; }.nav .nav-link:hover { color:#fff; }.text-link:hover { color:var(--blue); }
.nav-links { display:flex; align-items:center; gap:26px; font-size:.9rem; }
.menu-toggle { display:none; }
.nav-links > a, .research-menu summary { color:#dcecff; text-decoration:none; cursor:pointer; white-space:nowrap; }
.nav-links > a:hover, .research-menu summary:hover { color:#fff; }
.nav-links > a[aria-current="page"] { color:#fff; font-weight:600; }
.research-menu { position:static; }
.research-menu summary { list-style:none; font-size:0; }
.research-menu summary::-webkit-details-marker { display:none; }
.research-menu summary::before { content:"展示頁"; font-size:.9rem; }
.research-menu summary::after { content:"▼"; display:inline-block; margin-left:5px; font-size:.65rem; vertical-align:1px; transform:rotate(0deg); transition:transform .2s ease; }
.research-menu.is-open summary::after { transform:rotate(180deg); }
.research-menu summary span { display:none; }
.research-dropdown { position:absolute; z-index:10; top:100%; right:34px; min-width:190px; padding:7px; visibility:hidden; opacity:0; transform:translate3d(0,-8px,0); transform-origin:top right; backface-visibility:hidden; will-change:transform,opacity; pointer-events:none; background:#fff; border:1px solid var(--line); border-radius:0 0 9px 9px; box-shadow:0 12px 26px rgba(20,43,74,.16); transition:opacity .2s cubic-bezier(.2,.7,.2,1),transform .2s cubic-bezier(.2,.7,.2,1),visibility 0s linear .2s; }
.research-menu.is-open .research-dropdown { visibility:visible; opacity:1; transform:translate3d(0,0,0); pointer-events:auto; transition-delay:0s; }
.research-dropdown a { display:block; padding:10px 12px; color:var(--ink); text-decoration:none; font-size:.88rem; white-space:nowrap; border-radius:6px; }
.research-dropdown a:hover { color:var(--blue); background:#eef5fe; }
.blank-shell { min-height:100vh; }
.hero { max-width:780px; padding:18vh 0 11vh; }
.eyebrow,.card-kicker { color:var(--blue); font:500 .72rem "DM Mono",monospace; letter-spacing:.12em; }
.hero h1 { margin:15px 0 12px; font-size:clamp(3.7rem,11vw,7.5rem); letter-spacing:-.075em; line-height:.95; }
.lede { max-width:660px; margin:0; color:var(--text); font-size:clamp(1.05rem,2.4vw,1.35rem); line-height:1.9; }
.actions { margin-top:34px; }.button { display:inline-flex; align-items:center; gap:20px; padding:13px 17px; color:#fff; background:var(--blue); border:1px solid var(--blue); text-decoration:none; font-size:.93rem; transition:.2s; }.button:hover { background:var(--nav-blue); border-color:var(--nav-blue); transform:translateY(-2px); }
.grid { display:grid; grid-template-columns:1.35fr .85fr; gap:16px; }.card { padding:28px; background:var(--card); border:1px solid var(--line); }.card h2 { margin:10px 0; font-size:1.7rem; }.card p { color:var(--text); line-height:1.85; }.feature .text-link { display:inline-block; margin-top:14px; }.note { display:flex; flex-direction:column; justify-content:space-between; }.note blockquote { margin:20px 0; color:#263342; font-size:1.25rem; line-height:1.65; }.fine { color:var(--muted)!important; font:400 .77rem "DM Mono",monospace; }
footer { margin-top:auto; padding:64px 0 4px; display:flex; justify-content:space-between; gap:16px; color:var(--muted); font:400 .73rem monospace; }

.page-scrollbar { --scrollbar-edge-gap:6px; position:fixed; z-index:50; top:0; right:1px; bottom:0; width:8px; pointer-events:none; }
.page-scrollbar[hidden] { display:none; }
.page-scrollbar-thumb { position:absolute; top:var(--scrollbar-edge-gap); right:1px; width:5px; min-height:32px; border-radius:999px; background:var(--blue); pointer-events:auto; cursor:grab; touch-action:none; }
.page-scrollbar-thumb.is-dragging { cursor:grabbing; }

.profile-shell { padding-bottom:28px; }
.profile-card, .resume-card, .content-card {
  width:100%;
  max-width:600px;
  margin:32px auto 0;
  padding:38px 42px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 -4px 0 var(--blue), 0 8px 28px rgba(31,55,82,.045);
}
.profile-card { min-height:244px; margin-top:72px; padding-top:42px; padding-bottom:48px; border-top:4px solid var(--blue); text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.profile-photo { width:118px; height:118px; margin:0 0 22px; display:block; object-fit:cover; border:2px solid #111827; border-radius:50%; }
.content-card .profile-photo { margin-right:auto; margin-left:auto; }
.profile-name { margin:0; color:var(--ink); font-size:clamp(2rem,5vw,3.15rem); font-weight:700; letter-spacing:.04em; line-height:1.22; }
.profile-english { margin:8px 0 18px; color:var(--blue); font:500 1.1rem "DM Mono",monospace; letter-spacing:.01em; }
.profile-role { margin:0; color:var(--text); font-size:1.05rem; line-height:1.8; }
.resume-card h1 { margin:0 0 30px; color:var(--ink); font-size:1.35rem; letter-spacing:.08em; }
.timeline { --axis:120px; position:relative; margin:0; padding:0; list-style:none; }
.timeline::before { content:""; position:absolute; top:9px; bottom:9px; left:var(--axis); width:1px; transform:translateX(-50%); background:#c9d7e8; }
.timeline li { position:relative; display:grid; grid-template-columns:100px 1fr; column-gap:38px; padding:0 0 30px; }
.timeline li:last-child { padding-bottom:0; }
.timeline time { color:var(--blue); font:500 .82rem "DM Mono",monospace; line-height:1.65; white-space:nowrap; }
.timeline li::after { content:""; position:absolute; top:7px; left:var(--axis); width:11px; height:11px; border:2px solid var(--blue); border-radius:50%; transform:translateX(-50%); background:#fff; }
.timeline p { margin:0; color:var(--text); font-size:1rem; line-height:1.8; }
.content-card { margin-top:72px; }
.content-card h1 { margin:0 0 22px; color:var(--ink); font-size:1.35rem; letter-spacing:.08em; }
.content-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px; }
.content-card-heading h1 { margin:0; }
.cite-button { flex:0 0 auto; padding:8px 11px; color:var(--blue); background:#fff; border:1px solid #b9cee7; border-radius:7px; font:500 .8rem "Noto Sans TC",Arial,sans-serif; cursor:pointer; transition:.2s; }
.cite-button:hover { color:#fff; background:var(--blue); border-color:var(--blue); }
.content-card h2 { margin:0 0 12px; color:var(--ink); font-size:1.08rem; font-weight:600; line-height:1.7; }
.content-card p { margin:0; color:var(--muted); font-size:1rem; line-height:1.8; }
.blank-shell .content-card p + p { margin-top:14px; }
.about-social-links { margin-top:24px; display:flex; justify-content:center; align-items:center; gap:18px; }
.about-social-links a { width:36px; height:36px; display:grid; place-items:center; color:var(--muted); text-decoration:none; transition:color .2s ease; }
.about-social-links a:hover { color:var(--blue); }
.about-social-links svg { width:25px; height:25px; display:block; fill:currentColor; }
.pdf-embed { width:100%; height:480px; margin-top:24px; display:block; border:1px solid var(--line); border-radius:8px; background:#f7f9fb; }
.pdf-mobile-link { display:none; }
@media(max-width:650px) { .shell { padding:0 20px 22px; }.nav { min-height:64px; margin:0 calc(50% - 50vw); padding:10px 20px; align-items:center; }.menu-toggle { width:38px; height:38px; padding:8px; display:flex; flex-direction:column; justify-content:center; gap:5px; border:0; border-radius:6px; background:transparent; cursor:pointer; }.menu-toggle span { width:22px; height:2px; display:block; backface-visibility:hidden; will-change:transform,opacity; background:#fff; transition:.2s; }.menu-toggle.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }.menu-toggle.is-open span:nth-child(2) { opacity:0; }.menu-toggle.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }.nav-links { display:flex; position:absolute; z-index:20; top:100%; right:0; left:0; padding:8px 20px 14px; visibility:hidden; opacity:0; transform:translate3d(0,-8px,0); backface-visibility:hidden; will-change:transform,opacity; pointer-events:none; flex-direction:column; align-items:stretch; gap:0; background:var(--nav-blue); box-shadow:0 10px 20px rgba(15,39,71,.18); font-size:.92rem; text-align:left; transition:opacity .2s cubic-bezier(.2,.7,.2,1),transform .2s cubic-bezier(.2,.7,.2,1),visibility 0s linear .2s; }.nav-links.is-open { visibility:visible; opacity:1; transform:translate3d(0,0,0); pointer-events:auto; transition-delay:0s; }.nav-links > a, .research-menu summary { padding:12px 0; text-align:left; }.research-menu { width:100%; }.research-dropdown { position:static; min-width:0; margin:0 0 6px; transform:translate3d(0,-6px,0); transform-origin:top; box-shadow:none; border:0; border-radius:0; background:#123e72; }.research-menu.is-open .research-dropdown { transform:translate3d(0,0,0); }.research-dropdown a { padding:10px 13px; color:#e6f0ff; text-align:left; }.research-dropdown a:hover { color:#fff; background:#0f3561; }.hero { padding:15vh 0 9vh; }.grid { grid-template-columns:1fr; }.nav-link { font-size:.8rem; } footer { padding-top:42px; flex-direction:column; }.card { padding:22px; } .profile-card,.resume-card { margin-top:20px; padding:28px 24px; border-radius:12px; }.profile-card { margin-top:42px; }.timeline { --axis:95px; }.timeline li { grid-template-columns:80px 1fr; column-gap:34px; }.pdf-embed { display:block; height:300px; }.pdf-mobile-link { display:none; } }

@media(prefers-reduced-motion:reduce) { .nav-links,.research-dropdown,.menu-toggle span,.research-menu summary::after { transition:none; } }