:root{--ink:#173646;--paper:#f5f1e9;--line:#d8d3c9;--muted:#617277}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:"Noto Serif TC","PingFang TC","Microsoft JhengHei",serif}a{color:inherit;text-decoration:none}.wrap{width:min(1380px,calc(100% - 72px));margin:auto}a:focus-visible,button:focus-visible{outline:3px solid #a1834f;outline-offset:5px}.skip-link{position:fixed;top:-80px;left:16px;z-index:200;background:#fff;padding:12px}.skip-link:focus{top:12px}
nav{position:relative;z-index:100;background:#0b2733;color:#fff;border-bottom:1px solid #ffffff2c}.navin{height:68px;display:flex;align-items:center;gap:20px}.logo{font-size:23px;letter-spacing:.18em;white-space:nowrap}.logo small{display:none}.links{display:flex;gap:18px;align-items:center;font:13px sans-serif}.links a{display:flex;align-items:center;min-height:44px}.links a[aria-current]{color:#e1c896;text-decoration:underline;text-underline-offset:7px}.nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto}.member-entry,.menu-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;border:1px solid #ffffff88;border-radius:24px;color:#fff;font:14px/1.5 sans-serif;white-space:nowrap}.member-entry:hover,.menu-toggle:hover{background:#ffffff14}.menu-toggle{display:none;background:transparent;cursor:pointer}
.channel-header{padding:64px 0 44px;background:linear-gradient(115deg,#e8e1d4,#f5f1e9 75%);border-bottom:1px solid var(--line)}.breadcrumb{display:inline-flex;align-items:center;min-height:44px;font:13px sans-serif;color:#536669;margin-bottom:26px}.kicker{font:11px/1.7 sans-serif;letter-spacing:.15em;color:#786848}.channel-heading{display:flex;justify-content:space-between;align-items:end;gap:32px}.channel-heading h1{font-size:clamp(36px,4vw,54px);font-weight:400;line-height:1.3;margin:14px 0 18px}.channel-heading p{max-width:690px;font-size:16px;line-height:2;margin:0;color:#536669}.channel-count{flex-shrink:0;font:13px/1.8 sans-serif;letter-spacing:.08em;color:#617277;padding-bottom:5px}.channel-count strong{font:48px/1 serif;color:#173646;margin-right:12px}
.works-section{padding:44px 0 64px}.works-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.case-feature{display:flex;flex-direction:column;min-width:0;padding:32px;background:#faf8f3;border:1px solid #cec6b9}.work-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px}.work-number{font:12px/1.8 sans-serif;padding:4px 12px;border-radius:99px;background:#173646;color:#fff}.case-feature h2{font-size:26px;line-height:1.6;font-weight:400;margin:24px 0 12px}.work-title-accent{color:#87621c}.case-feature p{font-size:14px;line-height:1.95;color:var(--muted);margin:0 0 26px}.button{display:inline-flex;align-items:center;align-self:flex-start;min-height:44px;margin-top:auto;padding:10px 20px;border:1px solid #17364688;border-radius:99px;font:13px/1.7 sans-serif}.button:hover{background:#173646;color:#fff}.channel-note{font:13px/1.9 sans-serif;color:var(--muted);margin:28px 0 0}.site-footer{margin-top:0!important}
@media(max-width:1100px) and (min-width:901px){.navin{gap:16px}.links{gap:14px}.member-entry{font-size:13px;padding:8px 12px}}
@media(max-width:900px){.wrap{width:calc(100% - 34px);max-width:700px}nav{position:sticky;top:0}.navin{height:64px;gap:8px}.nav-actions{gap:8px}.member-entry{font-size:13px;padding:8px 10px}.menu-toggle{display:inline-flex;padding:8px 12px}.links{display:none;position:absolute;top:64px;left:0;right:0;background:#0b2733;padding:12px 17px 20px;max-height:calc(100dvh - 64px);overflow-y:auto;border-bottom:1px solid #ffffff44}.links.open{display:flex;flex-direction:column;align-items:stretch;gap:0}.links a{padding:13px 12px}.channel-header{padding:28px 0 32px}.breadcrumb{margin-bottom:20px}.channel-heading{align-items:start;flex-direction:column;gap:24px}.channel-heading h1{font-size:36px}.channel-count strong{font-size:32px}.works-section{padding:28px 0 40px}.works-grid{grid-template-columns:1fr;gap:18px}.case-feature{padding:26px}.case-feature h2{font-size:24px}}
@media(max-width:360px){.logo{font-size:21px}.nav-actions{gap:6px}.member-entry{padding:8px}.menu-toggle{padding:8px 10px;font-size:13px}.case-feature{padding:22px}.case-feature h2{font-size:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}