:root{
  --bg:#efe7d4;          /* 米黄背景, 像褪色的相纸 */
  --bg-2:#e6dcc5;         /* 比 bg 稍深一档 */
  --paper:#fbf6e9;        /* 卡片纸面 */
  --ink:#181410;          /* 油墨黑 */
  --ink-2:#3a322a;        /* 文字主色, 暖灰黑 */
  --muted:#7e6f5d;        /* 副文 */
  --primary:#8b4a2c;      /* 栗色 / 旧红 */
  --primary-dark:#6d3920;
  --amber:#c3922f;        /* 琥珀光 */
  --rust:#a85a37;
  --film:#0d0a08;         /* 胶片黑 (齿孔区) */
}
/* pro1 — Film Photography 胶片摄影感: 米黄 + 栗棕 + 衬线大字 + 齿孔装饰 */

*{box-sizing:border-box;}
body{background:var(--bg);color:var(--ink-2);font-family:"Inter","Pretendard","Noto Sans","PingFang SC",sans-serif;-webkit-font-smoothing:antialiased;line-height:1.65;}
::selection{background:var(--ink);color:var(--bg);}
::-webkit-scrollbar{width:11px;}
::-webkit-scrollbar-track{background:var(--bg-2);}
::-webkit-scrollbar-thumb{background:var(--primary);}

.serif{font-family:"Cormorant Garamond","Source Han Serif","Songti SC",serif;}
.headline{font-family:"Cormorant Garamond","Source Han Serif","Songti SC",serif;font-weight:500;letter-spacing:-.01em;line-height:1.05;}
.headline-tight{font-family:"Cormorant Garamond","Source Han Serif","Songti SC",serif;font-weight:600;letter-spacing:-.02em;line-height:.95;}
.mono{font-family:"JetBrains Mono","Courier Prime","SF Mono",monospace;letter-spacing:.04em;}
.eyebrow{font-family:"JetBrains Mono","SF Mono",monospace;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--primary);}
.tag-num{font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.18em;color:var(--muted);}

.t-primary{color:var(--primary);}
.t-amber{color:var(--amber);}
.t-ink{color:var(--ink);}
.t-muted{color:var(--muted);}
.bg-paper{background:var(--paper);}
.bg-ink{background:var(--ink);color:var(--bg);}
.bg-film{background:var(--film);color:#d9c89c;}
.fill-primary{background:var(--primary);color:var(--paper);}

/* 胶片齿孔条 —— 用 radial-gradient 画一排白色圆孔 */
.film-strip{background:
  radial-gradient(circle at 18px 50%, var(--bg) 0 5px, transparent 6px) 0 0 / 36px 100% repeat-x,
  var(--film);
  height:22px;
}
.film-strip-tall{background:
  radial-gradient(circle at 18px 50%, var(--bg) 0 5px, transparent 6px) 0 0 / 36px 100% repeat-x,
  var(--film);
  height:30px;
}
/* 横向用作 section 装饰的虚线 */
.dotted-rule{background-image:radial-gradient(circle, var(--ink-2) 1px, transparent 1.4px);background-size:8px 2px;background-repeat:repeat-x;height:2px;}

/* 卡片: 像贴在米色相册上的纸照片 */
.card{background:var(--paper);border:1px solid #d8cdb3;transition:transform .35s ease,box-shadow .35s ease;}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 40px -22px rgba(0,0,0,.35);}
.card-flat{background:var(--paper);border:1px solid #d8cdb3;}

/* 作品图框: 黑边 + 内白边, 像一张相纸 */
.photo-frame{background:var(--film);padding:8px;display:block;}
.photo-frame img{display:block;width:100%;height:auto;filter:saturate(.85);transition:filter .4s ease, transform .6s ease;}
.photo-frame:hover img{filter:saturate(1);transform:scale(1.02);}
/* 作品卡上的角标 */
.frame-no{font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.2em;color:#c3922f;}

/* 按钮 —— 硬边油墨黑 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.85rem 1.8rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:.78rem;background:var(--ink);color:var(--bg);border:1px solid var(--ink);transition:background .2s,color .2s,transform .2s;}
.btn:hover{background:transparent;color:var(--ink);transform:translateY(-1px);}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.85rem 1.8rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:.78rem;background:transparent;color:var(--ink);border:1px solid var(--ink);transition:.2s;}
.btn-ghost:hover{background:var(--ink);color:var(--bg);}
.btn-amber{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.85rem 1.8rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:.78rem;background:var(--primary);color:var(--paper);border:1px solid var(--primary);transition:.2s;}
.btn-amber:hover{background:var(--primary-dark);border-color:var(--primary-dark);}

/* chip / tag */
.chip{display:inline-flex;align-items:center;gap:.4rem;font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;background:transparent;color:var(--ink-2);border:1px solid #c2b89c;padding:.3rem .7rem;}
.chip-amber{display:inline-flex;align-items:center;font-family:"JetBrains Mono",monospace;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;background:var(--amber);color:var(--ink);padding:.25rem .6rem;}

/* cat-tab (作品筛选) */
.cat-tab{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;background:transparent;color:var(--muted);border-bottom:1px solid transparent;padding:.4rem .2rem;transition:.18s;}
.cat-tab:hover{color:var(--ink-2);}
.cat-tab.active{color:var(--ink);border-bottom-color:var(--primary);}

/* nav-link */
.nav-link{font-family:"JetBrains Mono",monospace;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);padding:.45rem .9rem;transition:color .18s;}
.nav-link:hover,.nav-link.active{color:var(--primary);}

.nav{display:flex;}
@media(max-width:1023px){
  .nav{position:fixed;top:0;right:0;bottom:0;width:80%;max-width:320px;flex-direction:column;align-items:stretch;gap:.4rem;background:var(--paper);border-left:1px solid #d8cdb3;padding:6rem 1.5rem 2rem;transform:translateX(101%);transition:transform .25s ease;z-index:60;overflow-y:auto;}
  .nav.active{transform:translateX(0);}
  .menu-overlay{position:fixed;inset:0;background:rgba(24,20,16,.55);opacity:0;visibility:hidden;transition:opacity .25s;z-index:55;}
  .menu-overlay.active{opacity:1;visibility:visible;}
  body.menu-open{overflow:hidden;}
  .nav-link{padding:.85rem 1rem;border-bottom:1px solid #ece2cb;}
}

/* masonry 瀑布流 —— 用 CSS columns */
.masonry{column-count:1;column-gap:1.25rem;}
@media(min-width:640px){.masonry{column-count:2;}}
@media(min-width:1024px){.masonry{column-count:3;}}
.masonry > *{break-inside:avoid;margin-bottom:1.25rem;display:block;}

/* skill bar */
.skill-bar{height:2px;background:#d8cdb3;position:relative;overflow:hidden;}
.skill-bar > span{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--primary),var(--amber));}

/* timeline */
.timeline{position:relative;padding-left:32px;}
.timeline:before{content:'';position:absolute;left:8px;top:6px;bottom:6px;width:1px;background:var(--ink-2);opacity:.5;}
.timeline-item{position:relative;}
.timeline-item:before{content:'';position:absolute;left:-30px;top:8px;width:13px;height:13px;background:var(--primary);border:3px solid var(--bg);border-radius:9999px;}

/* FAQ-style toggle (复用基础设施) */
.faq-answer{max-height:0;overflow:hidden;opacity:0;transition:max-height .3s ease,opacity .3s ease;}
.faq-item.active .faq-icon{transform:rotate(45deg);}
.faq-icon{transition:transform .2s ease;}

.back-to-top{opacity:0;visibility:hidden;transition:opacity .25s;}
.back-to-top.visible{opacity:1;visibility:visible;}

@media print{header,footer,.no-print{display:none;}}