:root{
  --ink:#011D2E;
  --ink-2:#062638;
  --paper:#F2E8E1;
  --muted:#B4ABA1;
  --gold:#C99A4E;
  --gold-soft:#E2BE7D;
  --line:rgba(201,154,78,.28);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  min-height:100vh;background:var(--ink);color:var(--paper);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit}
img{max-width:100%}
.serif{font-family:"Songti SC","STSong","Noto Serif SC","SimSun",serif}
.site-nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 5vw;
  background:linear-gradient(to bottom,rgba(1,29,46,.96),rgba(1,29,46,0));
}
.brand{display:flex;align-items:center;min-width:0;text-decoration:none}
.brand img{display:block;width:auto;height:64px}
.nav-links{display:flex;align-items:center}
.nav-links a{
  margin-left:24px;color:var(--muted);font-size:13px;letter-spacing:2px;
  text-decoration:none;transition:color .3s;
}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--gold-soft)}
.nav-links a[aria-current="page"]{position:relative;color:var(--paper)}
.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:2px;bottom:-8px;height:1px;background:var(--gold)
}
.nav-links .nav-cta{
  padding:9px 22px;border-radius:999px;color:var(--ink);
  background:linear-gradient(135deg,var(--gold-soft),var(--gold));font-weight:700;
}
main{min-height:70vh}
.works-page{max-width:1180px;margin:0 auto;padding:132px 5vw 118px}
.page-head h1{font-size:27px;font-weight:700;line-height:1.4;letter-spacing:.08em}
.works-tabs{
  display:flex;align-items:flex-end;gap:38px;margin-top:28px;border-bottom:1px solid var(--line);
}
.works-tab{
  position:relative;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 0 12px;
  border:0;background:transparent;color:var(--muted);font:inherit;font-size:16px;line-height:1.4;
  white-space:nowrap;cursor:pointer;transition:color .25s;
}
.works-tab::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .25s;
}
.works-tab:hover,.works-tab.is-active{color:var(--paper)}
.works-tab.is-active::after{transform:scaleX(1)}
.works-tab em{color:var(--gold);font-size:11px;font-style:normal;line-height:1;transform:translateY(-1px)}
.works-panel[hidden]{display:none}
.work-list{margin-top:26px;border-top:1px solid var(--line)}
.work-row{
  display:grid;grid-template-columns:44px minmax(220px,300px) minmax(0,1fr) auto;
  align-items:center;gap:34px;padding:34px 0;border-bottom:1px solid var(--line);
}
.work-no{align-self:start;padding-top:5px;color:var(--gold);font:italic 20px/1 Georgia,serif}
.work-cover{
  display:block;overflow:hidden;aspect-ratio:16/9;border:1px solid var(--line);
  border-radius:14px;background:var(--ink-2);
}
.work-cover img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center 34%;
  filter:saturate(.92);transition:filter .35s,transform .35s;
}
.work-cover:hover img,.work-cover:focus-visible img{filter:saturate(1.05);transform:scale(1.018)}
.work-copy{min-width:0}
.work-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;color:var(--gold);font-size:12px;letter-spacing:2px}
.work-meta .state{color:var(--muted)}
.work-copy h2{margin-top:12px;font-size:clamp(25px,2.5vw,34px);line-height:1.35;letter-spacing:.08em}
.work-copy p{max-width:580px;margin-top:12px;color:var(--muted);font-size:14.5px;line-height:1.9}
.work-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
.work-tags span{color:var(--muted);font-size:12px;letter-spacing:1px}
.work-tags span + span::before{content:"·";margin-right:8px;color:var(--gold)}
.work-open{
  align-self:center;white-space:nowrap;padding:10px 0 7px;border-bottom:1px solid var(--gold);
  color:var(--paper);font-size:14px;letter-spacing:2px;text-decoration:none;
  transition:color .25s,border-color .25s;
}
.work-open:hover,.work-open:focus-visible{color:var(--gold-soft);border-color:var(--gold-soft)}
.data-state{padding:42px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:14px;letter-spacing:1px}
.official-empty{padding:34px 0}
footer{
  border-top:1px solid rgba(201,154,78,.16);padding:70px 5vw 60px;text-align:center;
  color:var(--muted);font-size:13px;letter-spacing:2px;line-height:2.2;
}
footer .f-brand{display:block;width:min(360px,86vw);height:auto;margin:0 auto 18px}
:focus-visible{outline:2px solid var(--gold-soft);outline-offset:4px}
@media (max-width:960px){
  .site-nav{padding:14px 4vw}
  .brand img{content:url("../assets/todo-shield.png");width:38px;height:38px;object-fit:contain}
  .nav-links{gap:15px}
  .nav-links a{margin-left:0;font-size:12px;letter-spacing:1px;white-space:nowrap}
  .nav-links a[aria-current="page"]::after{bottom:-6px}
  .nav-links .nav-cta{display:none}
  .works-page{padding:116px 6vw 88px}
  .page-head h1{font-size:25px}
  .works-tabs{gap:30px;margin-top:22px}
  .works-tab{min-height:46px;padding-bottom:11px;font-size:15px}
  .work-list{margin-top:24px}
  .work-row{grid-template-columns:1fr;gap:0;padding:28px 0 34px}
  .work-no{padding:0 0 16px}
  .work-cover{width:100%}
  .work-copy{margin-top:24px}
  .work-copy h2{font-size:28px}
  .work-open{display:inline-flex;margin-top:22px}
}
@media (max-width:430px){
  .site-nav{padding-left:16px;padding-right:16px}
  .nav-links{gap:11px}
  .nav-links a{font-size:11.5px;letter-spacing:.5px}
  .works-tabs{gap:24px}
  .works-tab{font-size:15px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.work-cover img{transition:none}}