/* The works page shares the resume tokens; only its composition changes. */
/* Match the resume header despite the legacy styles loaded by this page. */
.works-page .site-header .icon-button { width:37px; height:37px; min-width:37px; min-height:37px; flex:0 0 37px; }
.works-page .site-header .header-actions>a { font:500 10px 'DM Mono',monospace; letter-spacing:inherit; }
@media (max-width:560px) {
  .works-page .site-header .icon-button { width:34px; height:34px; min-width:34px; min-height:34px; flex-basis:34px; }
  .works-page .site-header .header-actions>a { font-size:9px; }
}
.works-page .works-main { width:100%; max-width:1600px; margin:0 auto; padding:132px clamp(20px,4.5vw,72px) 64px; background:var(--bg); }
.works-page .works-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin:0 0 44px; }
.works-page .works-heading h1 { margin:0; font-size:clamp(42px,5.8vw,82px); font-weight:700; letter-spacing:-.065em; line-height:1.08; }
.works-page .works-heading p { max-width:390px; font-size:13px; line-height:1.9; color:var(--muted); margin:0 0 3px; }
.works-controls { position:relative; z-index:3; margin:0 0 32px; }
.works-filter-row { display:flex; flex-wrap:nowrap; align-items:center; gap:18px; margin-bottom:12px; }
.works-category { display:flex; align-items:center; gap:8px; min-width:0; font-size:14px; font-weight:700; line-height:1.35; letter-spacing:0; }
.works-category>label { flex:none; white-space:nowrap; }
.filter-divider { flex:none; color:var(--muted); font-size:14px; line-height:36px; }
.category-select { position:relative; display:inline-block; min-width:0; max-width:100%; color:var(--accent-ink); }
.category-select select,.filter-select-trigger { position:relative; appearance:none; min-width:80px; max-width:100%; min-height:36px; margin:0; border:0; border-bottom:1px solid currentColor; border-radius:0; background:transparent; color:inherit; font:inherit; letter-spacing:inherit; line-height:1.35; padding:8px 26px; text-align:center; cursor:pointer; }
.category-select select { text-align-last:center; }
.category-select>svg,.filter-select-trigger>svg { position:absolute; right:7px; top:50%; transform:translateY(-50%); width:12px; height:12px; pointer-events:none; }
.category-select select option { background:var(--paper); color:var(--ink); font-size:14px; }
.category-select.is-enhanced>select,.category-select.is-enhanced>svg { display:none; }
.filter-select-trigger { display:inline-flex; align-items:center; justify-content:center; }
.filter-selected-label { display:block; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.filter-select-trigger[aria-expanded=true]>svg { transform:translateY(-50%) rotate(180deg); }
.filter-options { position:absolute; z-index:10; top:calc(100% + 8px); left:0; width:max-content; min-width:200px; max-width:min(320px,calc(100vw - 40px)); max-height:min(320px,55svh); overflow-y:auto; overscroll-behavior:contain; margin:0; padding:6px; border:1px solid var(--frame); background:var(--paper); color:var(--ink); list-style:none; box-shadow:3px 3px 0 var(--shadow-ink); }
.works-role .filter-options { left:auto; right:0; }
.filter-options[hidden] { display:none; }
.filter-options>li { display:flex; align-items:center; min-height:44px; margin:0; padding:11px 16px; font-size:14px; line-height:1.5; letter-spacing:0; white-space:nowrap; cursor:pointer; }
.filter-option-check { margin-left:auto; padding-left:16px; visibility:hidden; }
.filter-options>li[aria-selected=true] .filter-option-check { visibility:visible; }
.filter-options>li.is-active { background:var(--brand-apricot); color:var(--brand-green); }
.works-refine { display:flex; align-items:center; border-bottom:1px solid var(--line); padding-bottom:19px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.filter-reset { flex:none; align-self:center; min-height:36px; padding:8px 0; margin:0 0 0 4px; background:transparent; color:var(--ink); font:11px/1.35 'DM Mono',monospace; white-space:nowrap; text-decoration:underline; text-underline-offset:4px; }
.works-result-count { margin:0 0 0 auto; font:11px 'DM Mono',monospace; color:var(--muted); white-space:nowrap; }
.works-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 24px; }
.work-tile { --tile-bg:var(--brand-green); --tile-ink:var(--brand-cream); --tile-accent:var(--brand-apricot); position:relative; min-width:0; border:1px solid var(--frame); background:var(--bg); transition:box-shadow .2s; }
.work-tile[data-tone="brown"] { --tile-bg:var(--brand-brown); --tile-ink:#ffffff; --tile-accent:var(--brand-cream); }
.work-tile[data-tone="apricot"] { --tile-bg:var(--brand-apricot); --tile-ink:var(--brand-green); --tile-accent:var(--brand-brown); }
.work-tile[data-tone="cream"] { --tile-bg:var(--brand-cream); --tile-ink:var(--brand-green); --tile-accent:var(--brand-apricot); }
.work-tile.is-wide { grid-column:1/-1; }
.work-stage { position:relative; isolation:isolate; aspect-ratio:16/9; overflow:hidden; color:var(--tile-ink); background:var(--tile-bg); display:grid; place-items:center; }
.work-stage::before { content:""; position:absolute; z-index:-1; width:43%; aspect-ratio:1; top:-38%; left:-10%; border:1px solid var(--tile-accent); border-radius:50%; }
.work-stage::after { content:""; position:absolute; z-index:-1; width:37%; height:31%; right:-13%; bottom:-13%; background:var(--tile-accent); transform:rotate(-28deg); }
.work-pending { position:absolute; top:17px; left:19px; font:9px/1.5 'DM Mono','Noto Sans TC',sans-serif; color:var(--tile-ink); }
.work-caption { width:76%; text-align:center; padding:36px 0; }
.work-caption p { color:inherit; }
.work-client { font-size:clamp(13px,1.4vw,19px); font-weight:500; margin:0 0 12px; }
.works-page .work-caption h2 { font-size:clamp(23px,2.8vw,40px); line-height:1.2; letter-spacing:-.05em; font-weight:700; text-wrap:balance; }
.work-category { margin:16px 0 0; font-size:10px; font-family:'DM Mono','Noto Sans TC',sans-serif; }
.work-tile.is-wide .work-caption h2 { font-size:clamp(30px,4.5vw,64px); }
.work-tile.is-wide .work-client { font-size:clamp(16px,1.7vw,24px); }
.work-credit { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:49px; padding:13px 17px; border-top:1px solid var(--frame); font-size:10px; line-height:1.7; color:var(--muted); }
.work-credit p { margin:0; }
.work-credit>span { white-space:nowrap; color:var(--ink); }
.work-cover { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:0; background:transparent; }
.work-tile:hover { box-shadow:4px 4px 0 var(--shadow-ink); }
.work-tile:hover .work-credit>span { text-decoration:underline; text-underline-offset:3px; }
.work-tile[hidden],.works-empty[hidden],.filter-reset[hidden] { display:none; }
.works-empty { padding:70px 24px; border:1px solid var(--frame); text-align:center; }
.works-empty h2 { font-size:30px; margin-bottom:18px; }
.works-empty p { font-size:14px; color:var(--muted); }
.works-empty button { margin-top:8px; padding:12px 20px; background:var(--button-bg); color:var(--button-ink); border-radius:999px; font-size:12px; }
.works-return { display:flex; align-items:baseline; justify-content:flex-end; gap:24px; margin-top:36px; }
.works-return .text-link { margin:0; font-size:13px; }
.works-return>a:last-child { font:10px 'DM Mono',monospace; }
.works-page .works-footer { max-width:1600px; margin:auto; padding:28px clamp(20px,4.5vw,72px); background:var(--bg); color:var(--muted); border:0; border-top:1px solid var(--line); font-size:11px; }
.work-dialog { width:min(880px,calc(100% - 40px)); max-width:880px; max-height:86svh; padding:28px; border:1px solid var(--frame); background:var(--bg); color:var(--ink); }
.work-dialog-head { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:24px; }
.work-dialog-head h2 { font-size:clamp(22px,3vw,34px); line-height:1.4; }
.work-dialog-head .icon-button { flex:none; }
.work-dialog-media { aspect-ratio:16/7; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid var(--line); background:var(--paper); color:var(--muted); }
.work-dialog-media p { margin:0 0 12px; font-size:24px; }
.work-dialog-media span { font-size:11px; }
.work-facts { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:26px 0 0; }
.work-facts dt { font-size:11px; color:var(--muted); margin-bottom:8px; }
.work-facts dd { margin:0; font-size:14px; }
.work-dialog-open { overflow:hidden; }
/* Reuse the resume contact section without the older works-page overrides. */
.works-page .contact { margin:0; border:0; background:transparent; color:var(--ink); font-size:15px; line-height:normal; }
.works-page .contact h2 { font-family:'Space Grotesk','Noto Sans TC',sans-serif; font-style:normal; font-weight:700; line-height:1.08; letter-spacing:-.075em; white-space:normal; text-wrap:wrap; }
.works-page .contact .contact-links { max-width:none; animation:none; }
.works-page .contact .contact-link { display:flex; align-items:normal; justify-content:space-between; min-height:0; padding:12px 0; border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; font:500 11px 'DM Mono',monospace; gap:20px; transition:none; }
.works-page .contact .contact-link span { font:inherit; }
.works-page .contact .contact-link:hover { transform:none; background:transparent; color:var(--accent-ink); }
.works-page .contact .back-top { margin:0; font:inherit; }
@media (max-width:560px) {
  .works-page .contact .contact-link { gap:10px; }
}
@media (max-width:800px) {
  .works-page .works-main { padding-top:110px; }
  .works-page .works-heading { align-items:flex-start; margin-bottom:32px; }
  .works-page .works-heading p { max-width:280px; font-size:11px; }
  .works-category { gap:8px; }
  .works-gallery { gap:26px 18px; }
  .work-caption { width:82%; }
  .work-pending { top:12px; left:13px; font-size:8px; }
  .work-credit { padding:11px 13px; gap:8px; font-size:9px; }
}
@media (max-width:560px) {
  .works-page .works-heading { display:block; }
  .works-page .works-heading h1 { font-size:44px; }
  .works-page .works-heading p { max-width:none; margin-top:20px; font-size:12px; }
  .works-controls { margin-bottom:24px; }
  .works-filter-row { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto; gap:10px; align-items:end; }
  .works-category { flex-direction:column; align-items:stretch; gap:6px; font-size:12px; }
  .works-category>label { font-size:11px; letter-spacing:.03em; }
  .category-select,.category-select select,.filter-select-trigger { width:100%; min-width:0; }
  .category-select select,.filter-select-trigger { padding:8px 22px; }
  .category-select>svg,.filter-select-trigger>svg { width:10px; height:10px; }
  .filter-reset { align-self:end; margin-left:0; font-size:10px; }
  .filter-divider { align-self:end; font-size:12px; text-align:center; }
  .works-gallery { grid-template-columns:minmax(0,1fr); gap:24px; }
  .work-tile.is-wide { grid-column:auto; }
  .work-caption { padding:38px 0 22px; width:83%; }
  .works-page .work-caption h2,.works-page .work-tile.is-wide .work-caption h2 { font-size:clamp(24px,6.4vw,34px); }
  .work-client,.work-tile.is-wide .work-client { font-size:14px; margin-bottom:10px; }
  .work-category { margin-top:12px; font-size:9px; }
  .work-credit { min-height:45px; }
  .work-dialog { width:calc(100% - 28px); padding:20px; }
  .work-dialog-head { gap:12px; }
  .work-dialog-media { aspect-ratio:4/3; }
  .work-dialog-media p { font-size:20px; }
  .work-facts { gap:20px; grid-template-columns:1fr; }
  .works-page .works-footer { gap:14px; }
}
@media print {
  .works-controls,.work-cover,.work-dialog,.works-return { display:none!important; }
  .works-page .works-main { padding:0; }
  .works-page .works-heading { margin-bottom:24px; }
  .works-gallery { gap:18px; }
  .work-tile { break-inside:avoid; box-shadow:none; }
  .work-tile.is-wide { grid-column:auto; }
  .work-stage { background:white; color:var(--brand-green); }
  .work-stage::before,.work-stage::after { display:none; }
  .work-pending { color:var(--brand-green); }
}