/* ============================================================
   Neo-Brutalist (新野兽派) Blog Prototype — base tokens
   核心配色：番茄红 (#FF4438) + 绿 (#1FD17B) + 黑白
   设计语言：纯黑粗边框 / 硬边缘阴影 / 无圆角 / 平面色块
   ============================================================ */

:root{
  --red:#FF4438;        /* 番茄红 */
  --green:#1FD17B;      /* 绿 */
  --black:#000;
  --white:#fff;
  --yellow:#FFD600;     /* 备用强调 */
  --shadow-sm:2px 2px 0 rgba(0,0,0,1);
  --shadow:4px 4px 0 rgba(0,0,0,1);
  --shadow-lg:8px 8px 0 rgba(0,0,0,1);
  --mono: ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --heavy:"Arial Black","Helvetica Neue",Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--white);
  color:var(--black);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* ---------- 通用排版 ---------- */
.h{
  font-family:var(--heavy);
  font-weight:900;
  letter-spacing:-.02em;
  line-height:.95;
  margin:0;
}
.mono{font-family:var(--mono)}
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.18em;
  margin:0 0 16px;
}

/* ---------- 导航 ---------- */
.nav{
  background:var(--white);
  border-bottom:2px solid var(--black);
  padding:14px 20px;
  position:sticky;top:0;z-index:50;
}
@media(min-width:768px){ .nav{border-bottom-width:4px;padding:18px 32px} }
.nav-inner{
  max-width:1180px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.logo{font-family:var(--heavy);font-weight:900;font-size:20px;letter-spacing:-.02em}
@media(min-width:768px){ .logo{font-size:26px} }
.nav-links{display:flex;gap:16px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
@media(min-width:768px){ .nav-links{gap:28px;font-size:14px} }
/* 仅作用于直接链接（旧静态导航）；GooeyNav 的嵌套链接由其自身样式接管 */
.nav-links > a{padding:4px 0;border-bottom:2px solid transparent;transition:border-color .15s}
.nav-links > a:hover{border-bottom-color:var(--black)}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-block;
  font-family:var(--heavy);font-weight:900;font-size:17px;
  border:2px solid var(--black);
  box-shadow:var(--shadow);
  background:var(--black);color:var(--white);
  padding:14px 26px;
  cursor:pointer;
  transition:all .2s ease-out;
}
@media(min-width:768px){ .btn{border-width:4px;box-shadow:var(--shadow-lg);font-size:19px} }
.btn:hover{box-shadow:none;transform:translate(2px,2px)}
.btn:active{transform:translate(8px,8px)}
.btn:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.btn--red{background:var(--red);color:var(--black);border-color:var(--black)}

/* ---------- Hero ---------- */
.hero{
  background:var(--white);
  border-bottom:2px solid var(--black);
  padding:56px 20px;
  position:relative;
  overflow:hidden;
  flex:1 1 auto;
  min-height:0;
}
@media(min-width:768px){ .hero{border-bottom-width:4px;padding:96px 32px 110px} }
.hero-inner{max-width:1000px;margin:0 auto}
.hero h1{
  font-family:var(--heavy);font-weight:900;letter-spacing:-.03em;
  font-size:clamp(46px,11vw,120px);line-height:.9;margin:0;
}
.hero .lead{
  font-family:var(--mono);font-size:15px;
  max-width:560px;margin-top:28px;
  background:var(--white);border:2px solid var(--black);
  padding:14px 16px;box-shadow:var(--shadow);
}
@media(min-width:768px){ .hero .lead{border-width:4px;font-size:16px} }
.hero .btn{margin-top:32px}

/* ---------- Section ---------- */
.section{padding:56px 20px}
@media(min-width:768px){ .section{padding:96px 32px} }
.section-inner{max-width:1180px;margin:0 auto}
.section h2{
  font-family:var(--heavy);font-weight:900;letter-spacing:-.02em;
  font-size:clamp(28px,5vw,52px);margin:0 0 36px;
}

/* ---------- 三档档案卡片（平面色块） ---------- */
.grid3{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:768px){ .grid3{grid-template-columns:repeat(3,1fr);gap:32px} }

.card{
  display:flex;flex-direction:column;
  border:2px solid var(--black);
  box-shadow:var(--shadow);
  background:var(--white);
  padding:24px;
  transition:all .2s ease-out;
}
@media(min-width:768px){ .card{border-width:4px} }
.card:hover{box-shadow:none;transform:translate(2px,2px)}
.card:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.card .no{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;margin-bottom:18px}
.card h3{font-family:var(--heavy);font-weight:900;font-size:24px;margin:0;line-height:1.05}
@media(min-width:768px){ .card h3{font-size:27px} }
.card .en{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.08em;margin-top:8px}
.card p{font-family:var(--mono);font-size:14px;margin:18px 0 0}
.card .arrow{font-family:var(--heavy);font-weight:900;font-size:26px;margin-top:auto;padding-top:26px}

/* 色块变体：番茄红 / 绿 / 黑 */
.card--red{background:var(--red)}
.card--green{background:var(--green)}
.card--ink{background:var(--black);color:var(--white)}

/* ---------- 页脚 ---------- */
.footer{
  background:var(--black);color:var(--white);
  border-top:2px solid var(--black);
  padding:56px 20px;
}
@media(min-width:768px){ .footer{border-top-width:4px;padding:96px 32px} }
.footer-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:36px}
@media(min-width:768px){ .footer-inner{grid-template-columns:repeat(3,1fr);gap:32px} }
.footer h4{font-family:var(--heavy);font-weight:900;font-size:22px;margin:0 0 16px}
.footer ul{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:14px;display:grid;gap:8px}
.footer a{border-bottom:2px solid transparent;padding-bottom:1px}
.footer a:hover{border-bottom-color:var(--white)}
.footer .tag{font-family:var(--mono);font-size:13px;margin-top:12px;opacity:.85}

/* ---------- 动效降级 ---------- */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
  .btn:hover,.card:hover{transform:none}
}

/* ============================================================
   首页：单屏、整体禁止下滑（仅区块内部可按需滚动）
   ============================================================ */
html, body{ height:100%; }
body.home{
  height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
/* 导航固定高度，不参与滚动 */
body.home .nav{ flex:0 0 auto; }
/* 主内容区：占用剩余高度，卡片超出时内部滚动 */
body.home .main{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
/* 交互档案区：内容可能超出 → 仅该区块内部滚动，不触发整页下滑 */
body.home .section:first-of-type{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
body.home .section:first-of-type .section-inner{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:auto;          /* 卡片溢出时这里滚，整页不滚 */
}
body.home .section:first-of-type h2{ flex:0 0 auto; }
/* Hero 身份卡：叠在 MagicBento 之上 */
body.home .hero{
  position:fixed;
  top:0; right:0;
  width:min(40vw,420px);
  height:100vh;
  z-index:40;
  pointer-events:none;    /* 仅名片本体可交互 */
  border-bottom:none;
  background:transparent;
}
body.home .hero .lanyard-slot{ pointer-events:auto; }
/* 首页页脚：精简且不溢出 */
body.home .home-footer{
  flex:0 0 auto;
  padding:28px 20px;
  border-top:2px solid var(--black);
}
@media(min-width:768px){ body.home .home-footer{ padding:36px 32px; } }
body.home .home-footer .footer-inner{ gap:20px; }
@media(max-width:767px){
  body.home .hero{ width:min(78vw,320px); }
}

/* ============================================================
   主页 PixelBlast 背景（WebGL2 全屏，红/绿/黄 随机生成）
   ============================================================ */
#pixelblast-bg{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;                 /* 最底层 */
  pointer-events:none;       /* 不拦截交互；点击涟漪由 window 监听转发 */
  display:block;
}
/* 内容层抬到背景之上：导航/主区/页脚均盖在像素背景上 */
body.home .nav{ z-index:50; position:sticky; }
body.home .main{ position:relative; z-index:1; }
body.home .home-footer{ position:relative; z-index:2; }
/* 卡片/区块背景保持透明或浅色，让像素透出来 */
body.home .section{ background:transparent; border-bottom:2px solid var(--black); }
@media(min-width:768px){ body.home .section{ border-bottom-width:4px; } }
/* 首页 bento 区：拉长占满左侧，右缘直达 Lanyard 名片左缘（卡片所在区域），
   并去掉滑动条。Lanyard 宽 min(30vw,320px)、right:4%，故其左缘 = 视口右 - (4% + min(30vw,320px)) */
@media(min-width:1024px){
  body.home .section:first-of-type{
    padding-right:0;
    padding-left:32px;
  }
  body.home .section:first-of-type .section-inner{
    max-width:none;
    margin:0;
    padding-left:0;
    padding-right:calc(4% + min(30vw,320px));
    justify-content:center;   /* 垂直居中扁平 bento */
    overflow:hidden;          /* 不使用滑动条 */
  }
  body.home .section:first-of-type #bento{ width:100%; }
}
body.home .hero{
  background:transparent;     /* 身份卡叠在像素背景上 */
}

/* ---------- 合集 DriftWall 全屏区 ---------- */
.drift-section{
  position:relative; height:100vh; overflow:hidden;
  background:#000; border-top:4px solid #000; border-bottom:4px solid #000;
}
.drift-head{
  position:absolute; top:0; left:0; z-index:3;
  padding:32px; pointer-events:none; color:#fff;
}
.drift-head h2{
  color:#fff; margin:0;
  font-family:var(--heavy); font-weight:900; letter-spacing:-.02em;
  font-size:clamp(28px,4vw,48px); line-height:1.05;
  text-transform:uppercase;
}
.drift-head .eyebrow{ color:#fff; opacity:.9; }
.drift-sub{
  font-family:var(--mono); font-size:14px; max-width:520px; margin-top:14px;
  color:rgba(255,255,255,.82);
}
.dw-add-btn{
  position:absolute; right:28px; bottom:28px; z-index:4;
  font-family:var(--heavy); font-weight:900; font-size:16px;
  background:var(--red); color:#000; border:4px solid #000;
  box-shadow:var(--shadow-lg); padding:14px 22px; cursor:pointer;
  transition:all .2s ease-out;
}
.dw-add-btn:hover{ box-shadow:none; transform:translate(4px,4px); }
.dw-add-btn:active{ transform:translate(8px,8px); }
.dw-add-panel{
  position:absolute; right:28px; bottom:96px; z-index:5;
  width:340px; max-width:calc(100vw - 56px);
  background:#fff; border:4px solid #000; box-shadow:var(--shadow-lg);
  padding:22px; display:flex; flex-direction:column; gap:14px;
}
.dw-add-panel[hidden]{ display:none; }
.dw-add-panel h3{ font-family:var(--heavy); font-weight:900; font-size:22px; margin:0; }
.dw-field{ display:flex; flex-direction:column; gap:6px; font-family:var(--mono); font-size:13px; font-weight:700; }
.dw-field input{
  font-family:var(--mono); font-size:14px; padding:10px;
  border:2px solid #000; background:#fff; color:#000;
}
.dw-field input:focus{ outline:3px solid var(--green); outline-offset:2px; }
.dw-add-actions{ display:flex; gap:12px; margin-top:4px; }
.dw-btn{
  flex:1; font-family:var(--heavy); font-weight:900; font-size:14px;
  border:3px solid #000; background:#fff; color:#000; padding:12px 10px; cursor:pointer;
  transition:all .15s ease-out;
}
.dw-btn:hover{ box-shadow:var(--shadow); }
.dw-btn--red{ background:var(--red); color:#000; }
.dw-btn:active{ transform:translate(2px,2px); }