/* English site (en/) — page components. Uses labs.css tokens (.labs-page) and site-chrome.css for header/footer. */
html { scroll-behavior: smooth; }
body.en-site { margin: 0; background: #f3f3f0; color: #121316; font-family: "Noto Sans TC", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.en-site img { max-width: 100%; }
.en-skip { position: absolute; left: -999px; top: 8px; z-index: 3000; background: #ffd24d; color: #121316; padding: 8px 14px; border-radius: 999px; font-weight: 700; }
.en-skip:focus { left: 12px; }
.en-page { padding-bottom: 72px; }
.en-page a { color: inherit; }
.en-page em { font-style: normal; }
.en-page .labs-section-head h3, .en-ph h1, .en-hero h1 { font-family: "Noto Serif TC", Georgia, serif; font-weight: 900; }
.en-page .ar, .en-page .ex { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; transition: transform .2s; }
.en-page .ex { width: 12px; height: 12px; vertical-align: 0; }
.en-sec { margin-top: 96px; scroll-margin-top: 90px; }
.en-note { margin: 18px 0 0; font-size: 14px; line-height: 1.7; color: var(--ink-3); }
.en-more { margin: 24px 0 0; }
.en-more a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); border-bottom: 2px solid #ffd24d; padding-bottom: 2px; }
.en-more a:hover .ar { transform: translateX(4px); }

/* ---------- hero (home) ---------- */
.en-hero { position: relative; overflow: hidden; background: #0d0e10; color: #fff; padding: 170px 0 110px; }
.en-hero-bg { position: absolute; inset: -8% -4%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; transform: rotate(-6deg); opacity: .34; }
.en-hero-bg img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.en-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 14, 16, .96) 0%, rgba(13, 14, 16, .78) 55%, rgba(13, 14, 16, .35) 100%); }
.en-hero-in { position: relative; z-index: 1; }
.en-hero .labs-mono { color: #ffd24d; display: flex; align-items: center; gap: 10px; }
.en-hero .labs-mono::before { content: ""; width: 28px; height: 2px; background: currentColor; flex: none; }
.en-hero h1 { margin: 22px 0 0; font-size: clamp(40px, 6.4vw, 84px); line-height: 1.05; letter-spacing: -.01em; max-width: 13em; }
.en-hero h1 em { color: #ffd24d; }
.en-hero .lead { margin: 26px 0 0; max-width: 38em; font-size: 18px; line-height: 1.75; color: rgba(255, 255, 255, .8); }
.en-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.en-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none; transition: transform .2s, background-color .2s, color .2s; }
.en-btn:hover { transform: translateY(-2px); }
.en-btn:hover .ar { transform: translateX(4px); }
.en-btn.red { background: #D7141E; color: #fff !important; box-shadow: 0 10px 26px -12px rgba(215, 20, 30, .9); }
.en-btn.red:hover { background: #ffd24d; color: #121316 !important; }
.en-btn.line { border: 2px solid rgba(255, 255, 255, .7); color: #fff !important; }
.en-btn.line:hover { background: #fff; color: #121316 !important; }
.en-page .labs-marquee { margin: 0; }

/* ---------- page head (sub pages) ---------- */
.en-ph { position: relative; overflow: hidden; background: #121316; color: #fff; padding: 150px 0 72px; }
.en-ph::after { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: #ffd24d; opacity: .12; }
.en-ph .labs-mono { color: #ffd24d; display: flex; align-items: center; gap: 10px; }
.en-ph .labs-mono::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.en-ph h1 { position: relative; z-index: 1; margin: 18px 0 0; font-size: clamp(34px, 5vw, 64px); line-height: 1.1; max-width: 16em; }
.en-ph h1 em { background: linear-gradient(transparent 62%, rgba(255, 210, 77, .55) 62%); }
.en-ph .lead { position: relative; z-index: 1; margin: 22px 0 0; max-width: 46em; font-size: 17px; line-height: 1.8; color: rgba(255, 255, 255, .78); }
.en-jump { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.en-jump a { display: inline-flex; height: 38px; align-items: center; padding: 0 16px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .35); color: #fff !important; font-size: 14px; font-weight: 700; text-decoration: none; }
.en-jump a:hover { background: #ffd24d; border-color: #ffd24d; color: #121316 !important; }

/* ---------- stats ---------- */
.en-stats, .en-awstats, .en-facstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: -1px; border-top: 2px solid var(--ink); }
.en-stats > div, .en-awstats > div, .en-facstats > div { padding: 22px 18px 0 0; }
.en-stats b, .en-awstats b, .en-facstats b { display: block; font-family: "Noto Serif TC", Georgia, serif; font-size: clamp(34px, 4vw, 52px); font-weight: 900; line-height: 1; }
.en-stats span, .en-awstats span, .en-facstats span { display: block; margin-top: 10px; font-size: 15px; font-weight: 700; }
.en-stats small, .en-awstats small { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; color: var(--ink-3); }
.en-stats, .en-awstats, .en-facstats { margin-top: 56px; }

/* ---------- why cards / eight strengths / abilities ---------- */
.en-why, .en-eight, .en-abil { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.en-abil { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.en-why > div, .en-eight > div, .en-abil > div { position: relative; background: var(--paper); border-radius: 18px; padding: 24px 22px 22px; box-shadow: 0 1px 0 var(--line), 0 20px 40px -34px rgba(18, 19, 22, .45); }
.en-why i, .en-eight i, .en-abil i { font: 700 12px/1 ui-monospace, Menlo, monospace; font-style: normal; color: #fff; background: var(--ink); display: inline-block; padding: 6px 9px; border-radius: 999px; }
.en-why h4, .en-eight h4, .en-abil h4 { margin: 16px 0 8px; font-size: 19px; font-weight: 900; line-height: 1.3; }
.en-why p, .en-eight p, .en-abil p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.en-why > div:nth-child(1) i { background: #D7141E; } .en-why > div:nth-child(2) i { background: #1F74D6; } .en-why > div:nth-child(3) i { background: #23A05A; } .en-why > div:nth-child(4) i { background: #C99A00; }

/* ---------- modules ---------- */
.en-mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.en-mod { --mc: #23A05A; position: relative; overflow: hidden; border-radius: 22px; padding: 28px 26px; background: var(--mc); color: #fff; min-height: 230px; }
.en-mod.m-digi { --mc: #1F74D6; } .en-mod.m-craft { --mc: #F5C518; color: #121316; }
.en-mod::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.en-mod .labs-mono { opacity: .8; }
.en-mod h4 { margin: 12px 0 10px; font-family: "Noto Serif TC", Georgia, serif; font-size: 24px; font-weight: 900; line-height: 1.25; }
.en-mod p { margin: 0; font-size: 15px; line-height: 1.7; opacity: .92; }
.en-mod-more { position: relative; z-index: 1; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .3); }
.m-craft .en-mod-more { border-color: rgba(18, 19, 22, .2); }
.en-mod-more h5 { margin: 12px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.en-mod-more ul { list-style: none; margin: 0; padding: 0; }
.en-mod-more .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.en-mod-more .chips li { font-size: 13px; background: rgba(255, 255, 255, .18); border-radius: 999px; padding: 4px 10px; }
.m-craft .en-mod-more .chips li { background: rgba(255, 255, 255, .55); }
.en-mod-more .jobs li { font-size: 14px; line-height: 1.8; }
.en-mod-more .jobs li::before { content: "→ "; }

/* ---------- works ---------- */
.en-bob { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.en-bob .en-work { grid-column: span 3; }
.en-bob .en-work:nth-child(1), .en-bob .en-work:nth-child(2) { grid-column: span 6; }
.en-works { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.en-work { display: flex; flex-direction: column; background: var(--paper); border-radius: 18px; overflow: hidden; box-shadow: 0 1px 0 var(--line), 0 20px 40px -34px rgba(18, 19, 22, .45); }
.en-work[hidden] { display: none !important; }
.en-work-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #ddd; cursor: zoom-in; }
.en-work-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.en-work:hover .en-work-img img { transform: scale(1.04); }
.en-work-b { padding: 16px 18px 18px; }
.en-work-b .yr { font: 600 11.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase; }
.en-work-b h4 { margin: 8px 0 2px; font-size: 17px; font-weight: 900; line-height: 1.35; }
.en-work.big .en-work-b h4 { font-size: 21px; }
.en-work-b .zh { margin: 0; font-size: 13px; color: var(--ink-3); }
.en-work-b ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.en-work-b li { font-size: 12px; font-weight: 700; line-height: 1.3; padding: 4px 9px; border-radius: 999px; background: var(--bg); }
.en-work-b li.bob { background: #D7141E; color: #fff; }
.en-filter button small { opacity: .6; }

/* ---------- quick links ---------- */
.en-links, .en-applinks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.en-applinks { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; }
.en-links a, .en-applinks a { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 48px; border-radius: 18px; background: var(--ink); color: #fff !important; text-decoration: none; transition: transform .25s, background-color .25s; }
.en-links a:hover, .en-applinks a:hover { transform: translateY(-4px); background: #D7141E; }
.en-links .labs-mono, .en-applinks .labs-mono { color: #ffd24d; font-size: 11px; }
.en-links b, .en-applinks b { font-size: 19px; font-weight: 900; }
.en-links small, .en-applinks small { font-size: 13.5px; color: rgba(255, 255, 255, .7); }
.en-links .ar, .en-applinks .ex { position: absolute; left: 22px; bottom: 18px; width: 20px; height: 20px; }

/* ---------- about ---------- */
.en-mission { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.en-mission .labs-mono { color: var(--brand); }
.en-mission h3 { margin: 12px 0 14px; font-family: "Noto Serif TC", Georgia, serif; font-size: clamp(24px, 3vw, 34px); font-weight: 900; line-height: 1.25; }
.en-mission p { margin: 0; font-size: 16px; line-height: 1.85; color: var(--ink-2); }
.en-goals { display: grid; gap: 10px; }
.en-goals div { background: var(--paper); border-radius: 16px; padding: 18px 20px; border-left: 6px solid #ffd24d; }
.en-goals b { display: block; font-size: 17px; font-weight: 900; }
.en-goals span { font-size: 14px; color: var(--ink-3); }
.en-camps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.en-camps article { background: var(--paper); border-radius: 22px; overflow: hidden; box-shadow: 0 1px 0 var(--line); }
.en-camps img { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.en-camps div { padding: 20px 22px 22px; }
.en-camps .labs-mono { color: var(--brand); font-size: 11px; }
.en-camps h4 { margin: 8px 0; font-size: 22px; font-weight: 900; }
.en-camps p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--ink-2); }
.en-labs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.en-lab { display: grid; grid-template-columns: 42% minmax(0, 1fr); background: var(--paper); border-radius: 20px; overflow: hidden; box-shadow: 0 1px 0 var(--line); }
.en-lab img { width: 100%; height: 100%; object-fit: cover; min-height: 200px; }
.en-lab div { padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.en-lab h4 { margin: 0; font-size: 19px; font-weight: 900; }
.en-lab span { font-size: 12.5px; color: var(--ink-3); font-weight: 700; }
.en-lab p { margin: 4px 0 8px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.en-lab a { margin-top: auto; align-self: flex-start; font-size: 14px; font-weight: 700; color: var(--brand) !important; border-bottom: 1.5px solid currentColor; }
.en-rooms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.en-rooms div { background: var(--paper); border-radius: 18px; overflow: hidden; }
.en-rooms img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.en-rooms h5 { margin: 14px 16px 4px; font-size: 16px; font-weight: 900; }
.en-rooms p { margin: 0 16px 16px; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
.en-life { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.en-life a { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 1; }
.en-life img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.en-life a:hover img { transform: scale(1.06); }
.en-life span { position: absolute; left: 8px; bottom: 8px; right: 8px; font-size: 12.5px; font-weight: 700; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }

/* ---------- programs ---------- */
.en-credits .bar { display: flex; gap: 4px; height: 64px; border-radius: 16px; overflow: hidden; }
.en-credits .bar span { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px; font-size: 14px; font-weight: 700; color: #fff; }
.en-credits .bar b { font-family: "Noto Serif TC", Georgia, serif; font-size: 24px; }
.en-credits .ge { background: #5B6472; } .en-credits .rq { background: #121316; } .en-credits .el { background: #D7141E; }
.en-credits p { margin: 14px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.en-path { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: y; }
.en-path li { position: relative; background: var(--paper); border-radius: 18px; padding: 20px; border-top: 5px solid #ffd24d; }
.en-path span { font: 600 12px/1 ui-monospace, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.en-path h4 { margin: 8px 0 6px; font-size: 18px; font-weight: 900; }
.en-path p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.en-mods.full .en-mod { min-height: 0; }
.en-courses { display: grid; gap: 10px; }
.en-cyear { background: var(--paper); border-radius: 18px; overflow: hidden; box-shadow: 0 1px 0 var(--line); }
.en-cyear summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 14px; padding: 18px 22px; }
.en-cyear summary::-webkit-details-marker { display: none; }
.en-cyear summary b { font-family: "Noto Serif TC", Georgia, serif; font-size: 22px; font-weight: 900; }
.en-cyear summary span { font-size: 14px; color: var(--ink-3); }
.en-cyear summary::after { content: "+"; margin-left: auto; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font-size: 18px; line-height: 1; transition: transform .2s; }
.en-cyear[open] summary::after { transform: rotate(45deg); background: #ffd24d; border-color: #ffd24d; }
.en-cyear .sems { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; padding: 0 22px 20px; }
.en-cyear h5 { margin: 4px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.en-cyear ul { list-style: none; margin: 0; padding: 0; }
.en-cyear li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 9px 0 9px 12px; border-bottom: 1px dashed var(--line); border-left: 3px solid #D7141E; margin-bottom: 4px; }
.en-cyear li.ele { border-left-color: #ccd0d6; }
.en-cyear li span { font-size: 15px; font-weight: 700; }
.en-cyear li small { grid-column: 1; font-size: 12.5px; color: var(--ink-3); }
.en-cyear li em { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 12px; color: var(--ink-3); text-align: right; }
.en-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.en-box { background: var(--paper); border-radius: 20px; padding: 24px; box-shadow: 0 1px 0 var(--line); }
.en-box.dark { background: var(--ink); color: #fff; }
.en-box .tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: #ffd24d; color: #121316; }
.en-box h4 { margin: 12px 0 8px; font-size: 20px; font-weight: 900; }
.en-box p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--ink-2); }
.en-box.dark p { color: rgba(255, 255, 255, .78); }
.en-box a { font-weight: 700; border-bottom: 1.5px solid #ffd24d; }
.en-grad { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: g; }
.en-grad li { counter-increment: g; position: relative; background: var(--paper); border-radius: 18px; padding: 52px 20px 20px; box-shadow: 0 1px 0 var(--line); }
.en-grad li::before { content: counter(g); position: absolute; left: 20px; top: 16px; width: 28px; height: 28px; border-radius: 50%; background: #D7141E; color: #fff; font-weight: 900; display: grid; place-items: center; font-size: 14px; }
.en-grad b { display: block; font-size: 18px; font-weight: 900; }
.en-grad span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.en-master { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; background: var(--paper); border-radius: 24px; padding: 30px; box-shadow: 0 1px 0 var(--line); }
.en-master > div > p { margin: 0; font-size: 16px; line-height: 1.85; color: var(--ink-2); }
.en-ticks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.en-ticks li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.en-ticks li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: #ffd24d; color: #121316; font-size: 12px; font-weight: 900; display: grid; place-items: center; margin-top: 3px; }
.en-ticks b { color: var(--ink); }
.en-master dl { margin: 0; display: grid; gap: 10px; }
.en-master dl div { background: var(--bg); border-radius: 14px; padding: 14px 16px; }
.en-master dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.en-master dd { margin: 4px 0 0; font-size: 16px; font-weight: 700; line-height: 1.5; }

/* ---------- faculty ---------- */
.en-facs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.en-fac { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 16px; background: var(--paper); border-radius: 20px; padding: 18px; box-shadow: 0 1px 0 var(--line), 0 20px 40px -34px rgba(18, 19, 22, .45); }
.en-fac img { width: 116px; height: 116px; border-radius: 16px; object-fit: cover; background: #ddd; }
.en-fac-b { min-width: 0; }
.en-fac .role { display: inline-block; margin-bottom: 6px; font-size: 11.5px; font-weight: 700; color: #fff; background: #D7141E; padding: 3px 9px; border-radius: 999px; }
.en-fac h4 { margin: 0; font-size: 18px; font-weight: 900; line-height: 1.3; }
.en-fac h4 small { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.en-fac .t { margin: 2px 0 8px; font-size: 13.5px; color: var(--ink-2); font-weight: 700; }
.en-fac .x { margin: 0 0 6px; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.en-fac .x b { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.en-fac a { font-size: 13px; font-weight: 700; color: var(--brand) !important; }
.en-facstats { margin-bottom: 0; }

/* ---------- admissions ---------- */
.en-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.en-steps li { position: relative; background: var(--paper); border-radius: 18px; padding: 22px 20px; box-shadow: 0 1px 0 var(--line); }
.en-steps li > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #ffd24d; font-weight: 900; font-size: 18px; }
.en-steps h4 { margin: 14px 0 8px; font-size: 18px; font-weight: 900; }
.en-steps p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.en-steps a { font-weight: 700; border-bottom: 1.5px solid #ffd24d; }
.en-two .en-box { height: 100%; }
.en-contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.en-contact a { display: flex; align-items: center; gap: 14px; padding: 20px; border-radius: 18px; background: var(--paper); box-shadow: 0 1px 0 var(--line); font-size: 17px; font-weight: 900; word-break: break-all; transition: transform .2s; }
.en-contact a:hover { transform: translateY(-3px); }
.en-contact svg { width: 26px; height: 26px; flex: none; color: #D7141E; }
.en-contact small { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }

/* ---------- footer extras / lightbox ---------- */
.en-soc { margin-top: 14px; }
.en-soc a { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff !important; font-size: 13.5px; font-weight: 700; }
.en-soc svg { width: 16px; height: 16px; }
.en-menu .dvh-top { font-size: 15px; }
.en-lbox { position: fixed; inset: 0; z-index: 3000; background: rgba(10, 10, 12, .94); display: flex; align-items: center; justify-content: center; padding: 24px 70px; }
.en-lbox[hidden] { display: none !important; }
.en-lbox figure { margin: 0; max-width: 100%; text-align: center; }
.en-lbox img { max-width: 100%; max-height: calc(100vh - 110px); border-radius: 8px; }
.en-lbox figcaption { margin-top: 12px; color: rgba(255, 255, 255, .85); font-size: 15px; }
.en-lbox button { position: absolute; border: 0; background: #fff; color: #111; border-radius: 50%; width: 48px; height: 48px; font-size: 30px; line-height: 1; cursor: pointer; }
.en-lbox .lb-x { top: 16px; right: 16px; }
.en-lbox .lb-prev { left: 12px; top: 50%; margin-top: -24px; }
.en-lbox .lb-next { right: 12px; top: 50%; margin-top: -24px; }
.en-lbox button:hover { background: #ffd24d; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
	.en-bob .en-work { grid-column: span 6; }
	.en-bob .en-work:nth-child(1), .en-bob .en-work:nth-child(2) { grid-column: span 12; }
	.en-why, .en-eight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.en-works { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.en-facs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.en-links, .en-steps, .en-grad, .en-path, .en-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.en-life { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.en-sec { margin-top: 64px; }
	.en-hero { padding: 120px 0 72px; }
	.en-hero-bg { grid-template-columns: repeat(2, 1fr); }
	.en-hero .lead { font-size: 16px; }
	.en-btn { width: 100%; justify-content: space-between; }
	.en-ph { padding: 110px 0 52px; }
	.en-ph .lead { font-size: 15.5px; }
	.en-stats, .en-awstats, .en-facstats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; margin-top: 40px; }
	.en-why, .en-eight, .en-abil, .en-mods, .en-two, .en-camps, .en-labs, .en-applinks, .en-contact, .en-mission, .en-master, .en-facs { grid-template-columns: 1fr; }
	.en-links, .en-steps, .en-grad, .en-path, .en-rooms { grid-template-columns: 1fr; }
	.en-bob, .en-works { grid-template-columns: 1fr 1fr; gap: 10px; }
	.en-bob .en-work { grid-column: span 1; }
	.en-bob .en-work:nth-child(1), .en-bob .en-work:nth-child(2) { grid-column: span 2; }
	.en-bob .en-work-b { padding: 12px; }
	.en-bob .en-work:not(:nth-child(-n+2)) .en-work-b h4 { font-size: 15px; }
	.en-works .en-work-b { padding: 12px; }
	.en-works .en-work-b h4 { font-size: 15px; }
	.en-works .en-work-b li { font-size: 11px; }
	.en-lab { grid-template-columns: 1fr; }
	.en-lab img { min-height: 0; aspect-ratio: 16 / 9; }
	.en-life { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.en-cyear .sems { grid-template-columns: 1fr; padding: 0 16px 16px; }
	.en-cyear summary { padding: 16px; flex-wrap: wrap; }
	.en-credits .bar { height: auto; flex-direction: column; }
	.en-credits .bar span { flex: none !important; padding: 12px 16px; }
	.en-fac { grid-template-columns: 84px minmax(0, 1fr); padding: 14px; gap: 14px; }
	.en-fac img { width: 84px; height: 84px; }
	.en-master { padding: 22px; }
	.en-lbox { padding: 20px 10px; }
	.en-lbox .lb-prev, .en-lbox .lb-next { top: auto; bottom: 16px; margin: 0; }
}

/* key dates (admissions) */
.en-keydates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.en-keydates > div { background: var(--ink); color: #fff; border-radius: 20px; padding: 22px 24px; }
.en-keydates .tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: #ffd24d; color: #121316; }
.en-keydates ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.en-keydates li { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.85); }
.en-keydates li b { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #ffd24d; }
.en-facts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.en-facts li { background: var(--paper); border-radius: 16px; padding: 16px 18px; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); box-shadow: 0 1px 0 var(--line); }
.en-facts li b { display: block; font-size: 16px; color: var(--ink); margin-bottom: 2px; }
.en-note a { font-weight: 700; color: var(--ink); border-bottom: 1.5px solid #ffd24d; }
@media (max-width: 767px) { .en-keydates, .en-facts { grid-template-columns: 1fr; } }

/* labs: number + manager (2026.10.10) */
.en-lab .no { font-size: 12px; font-weight: 900; letter-spacing: .12em; color: var(--brand); }
.en-lab em.who { font-style: normal; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.en-lab a span { border: 0; }

/* internship showcase (2026.10.10) */
.en-ishow { margin-top: 28px; }
.en-istats { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-bottom: 16px; }
.en-istats .tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: #ffd24d; color: #121316; }
.en-istats div { display: flex; align-items: baseline; gap: 8px; }
.en-istats b { font-size: 34px; font-weight: 900; line-height: 1; }
.en-istats small { font-size: 13px; color: var(--ink-3); font-weight: 700; }
.en-icases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.en-icase { display: flex; flex-direction: column; background: var(--paper); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 0 var(--line); color: inherit !important; text-decoration: none; transition: transform .25s, box-shadow .25s; }
.en-icase:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.12); }
.en-icase img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.en-icase div { padding: 12px 14px 14px; }
.en-icase h5 { margin: 0 0 4px; font-size: 15px; font-weight: 900; line-height: 1.35; }
.en-icase h5 small { display: block; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.en-icase p { margin: 0 0 6px; font-size: 13px; color: var(--ink-2); }
.en-icase span { font-size: 12px; font-weight: 700; color: var(--brand); }
.en-ishow .en-note a { color: var(--brand); font-weight: 700; }
@media (max-width: 960px) { .en-icases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.en-fac .x.lab a { font-size: 13px; border-bottom: 1px solid currentColor; }

/* home: labs + videos (2026.10.10) */
.en-ltiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.en-ltile { position: relative; display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; background: #222; color: #fff !important; text-decoration: none; }
.en-ltile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.en-ltile:hover img { transform: scale(1.06); }
.en-ltile span { position: absolute; inset: auto 0 0 0; padding: 32px 14px 12px; background: linear-gradient(transparent, rgba(0,0,0,.78)); font-size: 15px; font-weight: 900; line-height: 1.3; }
.en-ltile b { display: block; font-size: 11px; letter-spacing: .14em; color: #ffd24d; }
.en-ltile small { display: block; font-size: 11.5px; font-weight: 700; opacity: .8; }
.en-vids { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.en-vid.more { display: none; }
.en-vids.open .en-vid.more { display: block; }
.en-vplay, .en-vid iframe { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: 14px; overflow: hidden; background: #111; cursor: pointer; }
.en-vplay img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.en-vplay:hover img { transform: scale(1.04); }
.en-vplay i { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: #ffd24d; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.en-vplay i::after { content: ""; position: absolute; left: 22px; top: 18px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #121316; }
.en-vid .labs-mono { display: block; margin-top: 10px; }
.en-vid h4 { margin: 4px 0 0; font-size: 16px; font-weight: 900; line-height: 1.4; }
.en-vmore { font: inherit; font-size: 14px; font-weight: 700; padding: 10px 22px; border-radius: 999px; border: 1.5px solid currentColor; background: none; color: var(--brand); cursor: pointer; }
@media (max-width: 960px) { .en-ltiles, .en-vids { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .en-ltiles, .en-vids { grid-template-columns: 1fr; } }
.en-ltile { aspect-ratio: auto; background: var(--paper); color: var(--ink) !important; box-shadow: 0 1px 0 var(--line); }
.en-ltile img { aspect-ratio: 16 / 10; height: auto; }
.en-ltile span { position: static; padding: 10px 14px 12px; background: none; }
.en-ltile b { color: var(--brand); }
.en-ltile small { color: var(--ink-3); opacity: 1; }

/* ===== 2026.10.10b  labs card ratio: image on top, 4:3 ===== */
.en-labs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.en-lab { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.en-lab img { height: auto; min-height: 0; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s; }
.en-lab { isolation: isolate; }
.en-lab:hover img { transform: scale(1.03); }
@media (max-width: 1080px) { .en-labs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .en-labs { grid-template-columns: 1fr; } }

/* ===== home hero: award-work slideshow ===== */
.en-hero { min-height: min(94vh, 880px); display: flex; flex-direction: column; justify-content: center; padding: 150px 0 190px; }
.en-hs { position: absolute; inset: 0; }
.en-hs figure { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.6s ease; }
.en-hs figure.on { opacity: 1; }
.en-hs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; transform: scale(1.12) translateX(2%); }
.en-hs figure.on img, .en-hs figure.out img { animation: enKB 8.5s linear forwards; }
@keyframes enKB { from { transform: scale(1.12) translateX(2%); } to { transform: scale(1.02) translateX(-1%); } }
.en-hero::after { z-index: 0; background: linear-gradient(90deg, rgba(13,14,16,.94) 0%, rgba(13,14,16,.76) 38%, rgba(13,14,16,.18) 72%, rgba(13,14,16,.05) 100%), linear-gradient(0deg, rgba(13,14,16,.85) 0%, rgba(13,14,16,0) 34%); }
.en-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255,210,77,.10) 50%, transparent 60%) no-repeat; background-size: 250% 100%; animation: enSweep 8.5s ease-in-out infinite; }
@keyframes enSweep { 0% { background-position: 120% 0; } 60%, 100% { background-position: -40% 0; } }
.en-hero-in { z-index: 2; }
.en-hero-in > * { animation: enRise .9s cubic-bezier(.2,.7,.2,1) both; }
.en-hero-in > :nth-child(2) { animation-delay: .12s; } .en-hero-in > :nth-child(3) { animation-delay: .24s; } .en-hero-in > :nth-child(4) { animation-delay: .36s; }
@keyframes enRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.en-hcap { position: absolute; z-index: 2; right: max(24px, calc((100vw - 1200px) / 2)); bottom: 40px; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; text-align: right; }
.en-hcap-txt { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; transition: opacity .45s, transform .45s; }
.en-hcap-txt.swap { opacity: 0; transform: translateY(10px); }
.en-hcap .aw { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #121316; background: #ffd24d; padding: 4px 10px; border-radius: 999px; }
.en-hcap .t { font-family: "Noto Serif TC", Georgia, serif; font-size: clamp(20px, 2.2vw, 28px); font-weight: 900; text-shadow: 0 2px 16px rgba(0,0,0,.6); }
.en-hcap .m { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.78); text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.en-hthumbs { display: flex; gap: 8px; }
.en-hthumbs button { position: relative; width: 58px; height: 40px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer; background: #222; opacity: .55; transition: opacity .3s, transform .3s; }
.en-hthumbs button:hover, .en-hthumbs button.on { opacity: 1; }
.en-hthumbs button.on { transform: translateY(-4px); box-shadow: 0 0 0 2px #ffd24d; }
.en-hthumbs img { width: 100%; height: 100%; object-fit: cover; }
.en-hthumbs i { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #ffd24d; }
.en-hthumbs button.on i { animation: enBar var(--dur, 6s) linear forwards; }
.en-hero.paused .en-hthumbs button.on i, .en-hero.paused .en-hs figure.on img { animation-play-state: paused; }
@keyframes enBar { to { width: 100%; } }
@media (max-width: 820px) {
	.en-hero { min-height: 0; padding: 120px 0 34px; }
	.en-hero::after { background: linear-gradient(0deg, rgba(13,14,16,.95) 0%, rgba(13,14,16,.72) 55%, rgba(13,14,16,.45) 100%); }
	.en-hcap { position: relative; right: auto; bottom: auto; align-items: flex-start; text-align: left; margin: 34px 16px 0; }
	.en-hcap-txt { align-items: flex-start; }
	.en-hthumbs { flex-wrap: wrap; }
	.en-hthumbs button { width: 46px; height: 32px; }
}

/* ===== inner page headers: moving work wall ===== */
.en-ph { min-height: 440px; }
.en-ph::after { z-index: 0; inset: 0; width: auto; height: auto; border-radius: 0; opacity: 1; background: linear-gradient(90deg, #121316 0%, rgba(18,19,22,.92) 42%, rgba(18,19,22,.35) 75%, rgba(18,19,22,.15) 100%), linear-gradient(0deg, #121316 0%, rgba(18,19,22,0) 30%); }
.en-ph > .labs-wrap { position: relative; z-index: 1; }
.en-ph-wall { position: absolute; z-index: 0; top: -30%; bottom: -30%; right: -6%; width: 62%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; transform: rotate(-8deg); pointer-events: none; }
.en-ph-col { overflow: hidden; }
.en-ph-track { display: flex; flex-direction: column; gap: 14px; animation: enCol var(--sp, 46s) linear infinite; }
.en-ph-col:nth-child(2) .en-ph-track { animation-direction: reverse; }
.en-ph-track img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; opacity: .9; }
@keyframes enCol { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 7px)); } }
.en-ph-wall { animation: enFadeIn 1.2s ease both; }
@keyframes enFadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 820px) {
	.en-ph { min-height: 0; }
	.en-ph-wall { width: 120%; right: -30%; opacity: .5; }
	.en-ph::after { background: linear-gradient(0deg, #121316 0%, rgba(18,19,22,.82) 60%, rgba(18,19,22,.6) 100%); }
}
@media (prefers-reduced-motion: reduce) {
	.en-ph-track, .en-hs img, .en-hero::before, .en-hthumbs i, .en-hero-in > * { animation: none !important; }
}
@media (min-width: 821px) {
	.en-hs { left: 34%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%); }
	.en-hs img { object-position: 50% 50%; }
	.en-hero::after { background: linear-gradient(90deg, rgba(13,14,16,.9) 0%, rgba(13,14,16,.72) 40%, rgba(13,14,16,.2) 66%, rgba(13,14,16,0) 100%), linear-gradient(0deg, rgba(13,14,16,.8) 0%, rgba(13,14,16,0) 30%); }
	.en-hero h1, .en-hero .lead { text-shadow: 0 2px 18px rgba(13,14,16,.75); }
}
@media (min-width: 821px) and (max-width: 1100px) {
	.en-hs { left: 22%; }
	.en-hero::after { background: linear-gradient(90deg, rgba(13,14,16,.95) 0%, rgba(13,14,16,.82) 50%, rgba(13,14,16,.3) 80%, rgba(13,14,16,.1) 100%), linear-gradient(0deg, rgba(13,14,16,.8) 0%, rgba(13,14,16,0) 30%); }
}
@media (min-width: 821px) {
	.en-ph::after { background: linear-gradient(90deg, #121316 0%, rgba(18,19,22,.9) 34%, rgba(18,19,22,.42) 58%, rgba(18,19,22,.08) 100%), linear-gradient(0deg, #121316 0%, rgba(18,19,22,0) 26%); }
	.en-ph h1 { max-width: 13em; }
	.en-ph .lead { max-width: 36em; text-shadow: 0 1px 14px rgba(18,19,22,.9); }
	.en-ph-track img { opacity: 1; }
	.en-ph-wall { width: 56%; right: -4%; }
}
@media (max-width: 820px) {
	.en-hero { padding-top: 260px; }
	.en-hero::after { background: linear-gradient(0deg, rgba(13,14,16,.96) 0%, rgba(13,14,16,.8) 58%, rgba(13,14,16,.15) 100%); }
	.en-hs { bottom: auto; height: 62%; }
	.en-hcap { order: 2; }
	.en-hthumbs { flex-wrap: nowrap; gap: 6px; }
	.en-hthumbs button { width: 36px; height: 26px; border-radius: 6px; }
}

/* hero fits one screen (2026.10.10g) */
@media (min-width: 821px) {
	.en-hero { min-height: 0; height: clamp(560px, 100vh, 940px); height: clamp(560px, 100svh, 940px); padding: 96px 0 118px; justify-content: center; }
	.en-hero h1 { margin-top: clamp(10px, 2vh, 22px); font-size: clamp(38px, min(6vw, 8.4vh), 84px); }
	.en-hero .lead { margin-top: clamp(12px, 2.4vh, 26px); font-size: clamp(15px, 2.3vh, 18px); line-height: 1.7; max-width: 34em; }
	.en-hero .en-btns { margin-top: clamp(16px, 3vh, 34px); }
	.en-hcap { bottom: clamp(20px, 3.4vh, 40px); gap: 10px; }
	.en-hthumbs button { width: 50px; height: 34px; }
}
@media (min-width: 821px) { .en-hero { padding: 84px 0 150px; } }
@media (max-width: 820px) {
	.en-hero { padding-top: 236px; padding-bottom: 36px; }
	.en-hcap { position: absolute; top: 86px; left: 16px; right: 16px; margin: 0; }
	.en-hcap .t { font-size: 20px; }
	.en-hero h1 { margin-top: 14px; font-size: clamp(32px, 9.4vw, 46px); }
	.en-hero .lead { margin-top: 14px; font-size: 15px; line-height: 1.7; }
	.en-hero .en-btns { margin-top: 20px; }
}