[hidden] { display:none !important; }
/* Latin headings use the same sans family as the controls; retain Song-style Chinese headings. */
:root {
  --serif:'DM Sans',Arial,'Songti SC','SimSun',serif;
  --sans:'DM Sans',Arial,'PingFang SC','Microsoft YaHei',sans-serif;
  --mono:var(--sans);
}
html[lang="en"] .hero-title { font-size:clamp(30px,9vw,132px); line-height:1.03; letter-spacing:-.055em; font-weight:300; }
.project-bar-name { letter-spacing:-.025em; font-weight:400; }
.project-name-zh { letter-spacing:.12em; }
.nav-logo { letter-spacing:.12em; font-weight:500; }
.section-header { position:relative; max-width:1400px; margin:0 auto; padding-left:60px; padding-right:60px; display:grid; grid-template-columns:auto 1fr; gap:24px; }
.section-header .section-number { position:absolute; left:18px; bottom:66px; }
.section-header .section-title { grid-column:1; }
.section-header .section-line { grid-column:2; width:100%; align-self:end; margin-bottom:12px; }
.work-filters { max-width:1400px; margin:0 auto 44px; padding:0 60px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.zoom-tools button, .sheet-zoom { min-height:44px; min-width:44px; border:1px solid #655747; background:#171512; color:#eae3d7; border-radius:6px; padding:10px 18px; font:13px var(--sans); cursor:pointer; }
.glass-switch { --selected:0; --light-x:25%; position:relative; isolation:isolate; display:grid; grid-template-columns:repeat(3,1fr); width:310px; padding:5px; border:1px solid rgba(244,236,225,.17); border-radius:999px; background:linear-gradient(140deg,rgba(245,235,218,.09),rgba(255,255,255,.025) 52%,rgba(202,181,150,.055)); -webkit-backdrop-filter:blur(18px) saturate(125%); backdrop-filter:blur(18px) saturate(125%); box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(255,255,255,.035),0 5px 20px rgba(0,0,0,.14); }
.glass-switch::before { content:''; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(ellipse at var(--light-x) 0%,rgba(255,255,255,.12),transparent 65%); pointer-events:none; }
.glass-selection { position:absolute; top:5px; bottom:5px; left:5px; width:calc((100% - 10px)/3); transform:translateX(calc(var(--selected)*100%)); border-radius:999px; background:linear-gradient(155deg,rgba(255,255,255,.19),rgba(236,228,214,.07) 55%,rgba(255,255,255,.12)); border:1px solid rgba(255,255,255,.2); box-shadow:inset 0 1px 1px rgba(255,255,255,.24),inset 0 -1px 2px rgba(255,255,255,.05),0 2px 8px rgba(0,0,0,.22); transition:transform .42s cubic-bezier(.22,.8,.25,1); pointer-events:none; }
.work-filters button { position:relative; z-index:1; border:0; border-radius:999px; background:transparent; color:#aaa6a0; min-width:0; min-height:44px; padding:10px 12px; font:12px var(--sans); letter-spacing:.04em; cursor:pointer; transition:color .2s; -webkit-tap-highlight-color:transparent; }
.work-filters button[aria-pressed="true"] { color:#f0ece4; text-shadow:0 1px 5px rgba(255,255,255,.12); }
.work-filters button:hover { color:#f0ece4; }
.browse-order { flex-basis:100%; margin:0; font:11px/1.6 var(--sans); letter-spacing:.035em; color:#99938b; }
.discipline-heading { max-width:1400px; margin:0 auto 32px; padding:0 60px; display:flex; align-items:baseline; gap:16px; }
.discipline-heading h3 { font:26px/1.3 var(--serif); font-weight:400; margin:0; color:#d0c9bc; }
.discipline-kicker { font:10px var(--sans); letter-spacing:.16em; color:#938c81; }
.discipline-count { margin-left:auto; color:#7c756b; font:11px var(--mono); }
.discipline-next { padding-top:35px; }
.discipline-next .discipline-heading { padding-top:40px; position:relative; }
.discipline-next .discipline-heading::before { content:''; position:absolute; top:0; left:60px; right:60px; height:1px; background:linear-gradient(90deg,rgba(200,168,130,.22),transparent); }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .glass-switch { background:#242320; } }
@media(prefers-reduced-transparency:reduce) { .glass-switch { background:#242320; backdrop-filter:none; -webkit-backdrop-filter:none; } }
.work-filters a { margin-left:auto; color:#b3a697; font-size:12px; padding:12px 0; }
.work-filters button:focus-visible, .zoom-tools button:focus-visible, .sheet-zoom:focus-visible { outline:2px solid #e8cba6; outline-offset:3px; }
.sheet-zoom { display:block; margin:8px 0 18px auto; }
.zoom-dialog { position:fixed; inset:0; z-index:10000; background:#10100f; display:flex; flex-direction:column; height:100dvh; }
.zoom-tools { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:12px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left)); border-bottom:1px solid #39332b; }
.zoom-tools h2 { flex:1 1 220px; min-width:0; font:18px var(--serif); margin:0; }
.zoom-actions { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.zoom-tools button { padding:8px 12px; }
.zoom-tools button:disabled { opacity:.35; cursor:default; }
.zoom-percent { min-width:48px; text-align:center; font:12px var(--mono); }
.zoom-stage { flex:1; min-height:0; overflow:hidden; position:relative; touch-action:none; cursor:grab; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.zoom-stage.dragging { cursor:grabbing; }
.zoom-image { position:absolute; max-width:none; transform-origin:0 0; pointer-events:none; -webkit-user-drag:none; }
.zoom-mark { position:absolute; right:16px; bottom:16px; color:#eee2d1; background:#171512b8; padding:6px 9px; font:11px var(--sans); pointer-events:none; }
.zoom-hint { margin:0; padding:10px 16px max(12px,env(safe-area-inset-bottom)); text-align:center; color:#b2aa9f; font:12px/1.5 var(--sans); }
@media(max-width:600px) { .work-filters { padding:0 20px; gap:10px; margin-bottom:30px; } .glass-switch { width:100%; } .work-filters a { order:3; margin:0 0 0 auto; padding:2px 0; font-size:10px; } .browse-order { font-size:10px; } .discipline-heading { padding:0 20px; gap:12px; margin-bottom:24px; flex-wrap:wrap; } .discipline-heading h3 { font-size:23px; } .discipline-kicker { font-size:9px; } .discipline-next .discipline-heading::before { left:20px;right:20px; } .zoom-tools { gap:8px; } .zoom-tools h2 { flex-basis:100%; font-size:16px; } .zoom-actions { width:100%; justify-content:space-between; gap:3px; } .zoom-tools button { padding:8px; } }
@media(max-width:600px) {
  .zoom-tools { position:relative; }
  .zoom-tools h2 { padding-right:48px; min-height:44px; display:flex; align-items:center; }
  .zoom-tools [data-action="close"] { position:absolute; right:16px; top:12px; }
}
@media(prefers-reduced-motion:reduce) { .project-card,.sheet-wrap img,.glass-selection,.work-filters button { transition:none !important; } }
/* A quieter warm-glass finish, closer to the portfolio's existing palette. */
.glass-switch { width:288px; padding:4px; border-color:rgba(222,208,187,.12); background:linear-gradient(145deg,rgba(200,180,148,.055),rgba(235,227,215,.018)); box-shadow:inset 0 1px 0 rgba(240,230,214,.09),0 3px 12px rgba(0,0,0,.1); }
.glass-switch::before { background:radial-gradient(ellipse at var(--light-x) 0%,rgba(241,230,209,.075),transparent 65%); }
.glass-selection { top:4px; bottom:4px; left:4px; width:calc((100% - 8px)/3); background:linear-gradient(155deg,rgba(222,208,187,.12),rgba(222,208,187,.035)); border-color:rgba(235,225,210,.14); box-shadow:inset 0 1px 0 rgba(245,234,218,.12),0 1px 4px rgba(0,0,0,.14); }
.work-filters button[aria-pressed="true"] { text-shadow:none; }
.project-card .view-btn,
.project-cover::after {
  border:1px solid rgba(222,208,187,.18);
  border-radius:999px;
  background:linear-gradient(145deg,rgba(222,208,187,.10),rgba(235,227,215,.035));
  color:#e0d6c7;
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  backdrop-filter:blur(16px) saturate(120%);
  box-shadow:inset 0 1px 0 rgba(245,234,218,.14),inset 0 -1px 0 rgba(245,234,218,.025),0 3px 12px rgba(0,0,0,.12);
  font-family:var(--sans);
  letter-spacing:.1em;
}
.project-card .view-btn { min-height:44px; padding:12px 24px; font-size:11px; transition:background .25s,border-color .25s,box-shadow .25s; }
.project-card .view-btn:hover,
.project-card .view-btn:focus-visible {
  background:linear-gradient(145deg,rgba(222,208,187,.18),rgba(235,227,215,.07));
  border-color:rgba(235,225,210,.3);
  color:#f0ece4;
  box-shadow:inset 0 1px 0 rgba(245,234,218,.2),0 4px 16px rgba(0,0,0,.15);
}
.project-card .view-btn:focus-visible { outline:2px solid #c8a882; outline-offset:4px; }
.project-card .view-btn:active { background:rgba(222,208,187,.14); }
.project-cover::after { background:linear-gradient(145deg,rgba(35,31,26,.76),rgba(20,19,17,.64)); color:#f0ece4; white-space:nowrap; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .project-card .view-btn { background:#24211d; }
  .project-cover::after { background:#24211d; }
}
@media(prefers-reduced-transparency:reduce) {
  .project-card .view-btn,.project-cover::after { background:#24211d; -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media(prefers-reduced-motion:reduce) { .project-card .view-btn { transition:none; } }
.browse-order { color:#827c73; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .glass-switch { background:#201e1b; } }
@media(prefers-reduced-transparency:reduce) { .glass-switch { background:#201e1b; } }
@media(max-width:900px) {
  .section-header { padding-left:20px; padding-right:20px; column-gap:18px; row-gap:12px; }
  .section-header .section-number { position:static; grid-column:1/-1; }
  .work-filters,.discipline-heading { padding-left:20px; padding-right:20px; }
  .discipline-next .discipline-heading::before { left:20px;right:20px; }
}
@media(max-width:600px) { .glass-switch { width:min(100%,310px); } }
@media(max-width:400px) {
  html[lang="en"] nav { padding-left:16px; padding-right:16px; }
  html[lang="en"] .nav-actions { gap:8px; }
  html[lang="en"] .nav-links { gap:8px; }
  html[lang="en"] .nav-links a { font-size:8px; letter-spacing:0; }
}