/* 都在玩 · douzaiwan.com — 设计令牌取自 DESIGN-claude.md */
:root{
  --canvas:#faf9f5;
  --surface-soft:#f5f0e8;
  --surface-card:#efe9de;
  --surface-strong:#e8e0d2;
  --dark:#181715;
  --dark-elev:#252320;
  --dark-soft:#1f1e1b;

  --ink:#141413;
  --body-strong:#252523;
  --body:#3d3d3a;
  --muted:#6c6a64;
  --faint:#8e8b82;
  --hairline:#e6dfd8;
  --hairline-soft:#ebe6df;
  --hairline-dark:rgba(250,249,245,.12);

  --primary:#cc785c;
  --primary-active:#a9583e;
  --teal:#5db8a6;
  --amber:#e8a55a;
  --on-primary:#ffffff;
  --on-dark:#faf9f5;
  --on-dark-soft:#a09d96;

  --serif:"Cormorant Garamond","EB Garamond",Georgia,"Songti SC","STSong",SimSun,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;

  --maxw:1200px;
  --colw:760px;
  --pad:clamp(1.25rem,4vw,2.5rem);
  --gap:clamp(1.25rem,3vw,2rem);
  --section:clamp(3.5rem,9vw,6rem);

  --r-sm:6px;
  --r-md:8px;
  --r-lg:12px;
  --r-xl:16px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--canvas);
  color:var(--body);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none}
a:active{color:var(--primary-active)}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:400;font-family:var(--serif)}
p{margin:0}

.wrap{width:min(var(--maxw),calc(100% - var(--pad)*2));margin-inline:auto}
.col{width:min(var(--colw),calc(100% - var(--pad)*2));margin-inline:auto}

/* ---------- 顶栏 ---------- */
.nav{
  position:sticky;top:0;z-index:10;
  background:var(--canvas);
  border-bottom:1px solid var(--hairline);
}
.nav .wrap{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.5rem 1rem;min-height:64px;
}
.brand{
  display:inline-flex;align-items:center;gap:.6rem;
  color:var(--ink);
  font-family:var(--serif);font-size:22px;line-height:1.2;letter-spacing:-.01em;
}
.logo{width:26px;height:26px;border-radius:var(--r-md);flex:none}
.links{display:flex;flex-wrap:wrap;gap:.25rem;font-size:14px;font-weight:500}
.links a{
  padding:.4rem .8rem;border-radius:var(--r-md);
  color:var(--muted);line-height:1.4;
}
.links a:hover{color:var(--ink)}
.links a.on{color:var(--ink);background:var(--surface-card)}

/* ---------- 首屏 ---------- */
.hero{padding-block:var(--section) clamp(2rem,6vw,3rem)}
.hero-grid{
  display:grid;align-items:start;
  gap:clamp(2rem,6vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
}
.hero-copy{max-width:34em}
.eyebrow{
  margin:0 0 1.25rem;
  color:var(--muted);
  font-size:12px;font-weight:500;letter-spacing:.22em;
}
.hero h1{
  font-size:clamp(2rem,6.5vw,3rem);
  line-height:1.15;letter-spacing:-.02em;
}
.lede{
  margin:1.5rem 0 0;
  color:var(--body-strong);
  font-size:18px;line-height:1.6;
}
.contact{margin:1.5rem 0 0;color:var(--muted);font-size:14px}
.cta{
  display:inline-flex;align-items:center;gap:.5rem;
  margin-top:clamp(1.5rem,4vw,2rem);
  min-height:40px;padding:12px 20px;border-radius:var(--r-md);
  background:var(--primary);color:var(--on-primary);
  font-size:14px;font-weight:500;line-height:1;
}
.cta:active{background:var(--primary-active);color:var(--on-primary)}

/* 首屏配图 */
.figure{
  margin:0;
  background:var(--surface-soft);
  border-radius:var(--r-xl);
  padding:clamp(1rem,3vw,1.5rem);
}
.figure svg{width:100%;height:auto}
.figure figcaption{
  margin-top:.9rem;
  color:var(--muted);font-size:13px;line-height:1.5;
}

/* 深色速览卡 */
.panel{
  background:var(--dark);color:var(--on-dark-soft);
  border-radius:var(--r-xl);
  padding:clamp(1.25rem,4vw,2rem);
}
.panel h2{color:var(--on-dark);font-size:22px;letter-spacing:-.01em}
.panel .kicker{
  margin:0 0 1.25rem;color:var(--on-dark-soft);
  font-size:12px;font-weight:500;letter-spacing:.22em;
}
.panel-list{margin:0;padding:0;list-style:none}
.panel-list li{padding-block:.85rem}
.panel-list li + li{border-top:1px solid var(--hairline-dark)}
.panel-list a{
  display:block;color:var(--on-dark);
  font-size:16px;line-height:1.45;
}
.panel-list a:hover{color:#fff}
.panel-list span{display:block;margin-top:.25rem;color:var(--on-dark-soft);font-size:13px}
.panel-foot{
  display:flex;flex-wrap:wrap;gap:.35rem .75rem;justify-content:space-between;
  margin-top:1.5rem;padding-top:1.1rem;
  border-top:1px solid var(--hairline-dark);
  font-size:13px;
}
.panel-foot a{color:var(--amber)}

/* ---------- 段落骨架 ---------- */
.section{padding-block:clamp(2rem,7vw,3.5rem) var(--section)}
.head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.5rem 1.5rem;
  margin-bottom:clamp(1.25rem,4vw,2rem);
}
.head h2{font-size:clamp(1.6rem,4.5vw,2rem);line-height:1.2;letter-spacing:-.015em}
.head a{font-size:14px;font-weight:500}
.page-head{padding-block:var(--section) clamp(1.5rem,5vw,2.5rem)}
.page-head h1{font-size:clamp(2rem,6.5vw,3rem);line-height:1.15;letter-spacing:-.02em}
.page-head .lede{max-width:36em}

/* ---------- 笔记列表 ---------- */
.list{margin:0;padding:0;list-style:none}
.item{
  display:grid;gap:.35rem clamp(1rem,4vw,2.5rem);
  grid-template-columns:minmax(0,auto) minmax(0,1fr);
  padding-block:clamp(1.25rem,4vw,1.75rem);
  color:inherit;
}
.list > .item + .item,
.item + .item{border-top:1px solid var(--hairline)}
a.item:hover h3{color:var(--primary-active)}
.date{
  color:var(--faint);
  font-size:13px;font-weight:500;letter-spacing:.08em;
  padding-top:.35rem;
}
.item h3{font-size:22px;line-height:1.35;letter-spacing:-.01em}
.item p{margin-top:.5rem;color:var(--body);font-size:16px;line-height:1.6}
@media (max-width:600px){
  .item{grid-template-columns:minmax(0,1fr)}
  .date{padding-top:0}
}

/* ---------- 作品网格 ---------- */
.grid{
  display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
}
.card{
  display:block;color:inherit;
  background:var(--surface-card);
  border-radius:var(--r-lg);
  padding:clamp(1rem,3vw,1.25rem);
}
.card .thumb{
  background:var(--surface-soft);
  border-radius:var(--r-md);
  overflow:hidden;
}
.card .thumb svg{width:100%;height:auto}
.card .body{padding:clamp(1rem,3vw,1.25rem) .25rem .25rem}
.card h3{font-size:20px;line-height:1.35;letter-spacing:-.01em}
.card p{margin-top:.5rem;color:var(--body);font-size:15px;line-height:1.6}
.tag{
  display:inline-block;
  margin-bottom:.75rem;padding:4px 12px;
  background:var(--canvas);color:var(--muted);
  border-radius:9999px;
  font-size:12px;font-weight:500;letter-spacing:.12em;
}

/* ---------- 正文页 ---------- */
main.article{padding-block:var(--section) var(--section)}
.head-line{margin-bottom:clamp(1.5rem,5vw,2.5rem)}
.head-line h1{font-size:clamp(1.75rem,5.5vw,2.5rem);line-height:1.25;letter-spacing:-.02em}
.byline{margin-top:.9rem;color:var(--faint);font-size:13px;font-weight:500;letter-spacing:.1em}
.prose{width:min(var(--colw),calc(100% - var(--pad)*2));margin-inline:auto}
.prose p{margin:0 0 1.35em;font-size:17px;line-height:1.8;color:var(--body)}
.prose strong{color:var(--ink);font-weight:500}
.prose h2{
  margin:2.4em 0 .7em;
  font-size:clamp(1.35rem,4vw,1.6rem);line-height:1.3;letter-spacing:-.015em;
}
.prose blockquote{
  margin:2em 0;padding:clamp(1.25rem,4vw,1.75rem);
  background:var(--surface-card);border-radius:var(--r-lg);
  color:var(--ink);
  font-family:var(--serif);font-size:clamp(1.2rem,3.5vw,1.4rem);line-height:1.5;
}
.prose .back{
  display:inline-flex;margin-top:2.5rem;
  font-size:14px;font-weight:500;
}

/* ---------- 信息表 / 说明 ---------- */
.info{margin:0;padding:0}
.info > div{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.25rem 1.5rem;
  padding-block:1rem;
}
.info > div + div{border-top:1px solid var(--hairline)}
.info dt{color:var(--muted);font-size:14px}
.info dd{margin:0;color:var(--ink);font-size:16px;font-weight:500;text-align:right}
.info dd a{color:var(--primary)}

.panel .info > div + div{border-top-color:var(--hairline-dark)}
.panel .info dt{color:var(--on-dark-soft)}
.panel .info dd,.panel .info dd a{color:var(--on-dark)}

.note{
  margin-top:clamp(1.5rem,5vw,2.5rem);
  padding-top:clamp(1.25rem,4vw,1.75rem);
  border-top:1px solid var(--hairline);
  color:var(--muted);font-size:14px;line-height:1.7;
}

/* ---------- 行动 band ---------- */
.band{
  background:var(--primary);color:var(--on-primary);
  border-radius:var(--r-lg);
  padding:clamp(1.75rem,6vw,3rem);
}
.band h2{color:var(--on-primary);font-size:clamp(1.5rem,4.5vw,1.9rem);line-height:1.25;letter-spacing:-.015em}
.band p{margin-top:.9rem;color:rgba(255,255,255,.86);font-size:16px;line-height:1.6;max-width:38em}
.band .cta{
  margin-top:clamp(1.25rem,4vw,1.75rem);
  background:var(--canvas);color:var(--ink);
}
.band .cta:active{background:var(--surface-strong);color:var(--ink)}

/* ---------- 页脚 ---------- */
footer{
  background:var(--dark);color:var(--on-dark-soft);
  padding-block:var(--section) clamp(1.5rem,5vw,2rem);
}
.foot-grid{
  display:grid;gap:clamp(1.5rem,5vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
}
.foot-brand{grid-column:1/-1;max-width:34em}
@media (min-width:900px){.foot-brand{grid-column:auto}}
.foot-brand .brand{color:var(--on-dark)}
.foot-brand p{margin-top:.9rem;font-size:14px;line-height:1.7}
.foot-col h4{
  margin:0 0 1rem;color:var(--on-dark);
  font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.22em;
}
.foot-col a{
  display:block;margin-bottom:.6rem;
  color:var(--on-dark-soft);font-size:14px;line-height:1.5;
}
.foot-col a:hover{color:var(--on-dark)}
.foot-bar{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.35rem 1.5rem;
  margin-top:clamp(2rem,6vw,3rem);padding-top:clamp(1.25rem,4vw,1.75rem);
  border-top:1px solid var(--hairline-dark);
  font-size:14px;
}
.foot-bar a{color:var(--on-dark-soft)}
.foot-bar a:hover{color:var(--on-dark)}