/* Members Directory —— 照 design-system/lab-directory-mockup-v5.html 做（像素靶子）。
   与设计稿的差别只有三处，都是「展示稿 → 真页面」必须的：
   1. 拆掉手机外框（.phone 的 380px 固定宽、740px 高、圆角投影），改成整页
   2. 卡片格从写死两栏改成 auto-fill：380px 仍是两栏，桌面自动多排几栏，
      卡片尺寸维持设计稿的比例（拉宽成两大栏会让拍立得变形）
   3. 补 prefers-reduced-motion 与 hover:none（设计稿没有，spec 要求）
   其余 tokens、锯齿边 clip-path、歪斜角度、球 hover 参数全部照抄。 */

body{font-family:Inter,'Noto Sans SC',system-ui,sans-serif; background:var(--cream); color:#1c1917;}
.page{width:100%; max-width:1120px; margin:0 auto; position:relative;}
:root{
    --court:#2f5c49; --court-deep:#284f3e; --tile-dark:#1e4636; --hero-dark:#12332a;
    --cream:#f4eede; --paper:#efe7d7; --green-ink:#1f4a38; --gold:#c9a227; --ball:#e8c93e;
    --hair:#d8d0c6; --cloud:#f0ebe3;
  }
  *{box-sizing:border-box; margin:0;}

  /* ══ HERO：深绿 + 照片 ══ */
  .hero{position:relative; color:var(--cream); overflow:hidden;
    background:
      repeating-linear-gradient(52deg, rgba(255,255,255,.03) 0 1px, transparent 1px 8px),
      linear-gradient(165deg, #1c4437, var(--hero-dark));}
  .heroimg{position:absolute; inset:0; opacity:.34;
    background:linear-gradient(140deg,#3d7a5d,#152e26);}
  /* 导航抽去全站统一的 .lab-nav（nav.css，2026-09-15）。
     手机横幅顺势缩短（host 批的顺手项）：上下留白收紧，先看到人再看到横幅 */
  .hero .inner{position:relative; z-index:2; padding:24px 18px 18px;}
  .script{font-family:'Playfair Display',serif; font-style:italic; font-size:15px; color:var(--gold);}
  .hero h1{font-family:Anton,sans-serif; font-size:38px; line-height:1.02; letter-spacing:.5px;
    margin:6px 0 10px; text-transform:uppercase;}
  .hero .sub{font-size:13px; letter-spacing:.5px;}
  .hero .sub b{color:var(--ball); font-weight:700;}

  /* 撕纸数据条 */
  .stats{position:relative; z-index:3; margin:-14px 14px 0; background:var(--cream);
    padding:13px 8px; display:flex; box-shadow:0 8px 22px rgba(18,40,30,.22);
    -webkit-mask:
      linear-gradient(#000 0 0) padding-box,
      radial-gradient(6px 4px at 12% 0, transparent 92%, #000) border-box;
    clip-path:polygon(0 6px,4% 2px,9% 7px,15% 1px,22% 6px,30% 2px,38% 7px,47% 2px,55% 6px,63% 1px,71% 6px,79% 2px,87% 7px,94% 2px,100% 6px,100% calc(100% - 6px),95% calc(100% - 2px),88% calc(100% - 7px),79% calc(100% - 2px),70% calc(100% - 6px),61% calc(100% - 1px),52% calc(100% - 6px),43% calc(100% - 2px),34% calc(100% - 7px),25% calc(100% - 2px),16% calc(100% - 6px),8% calc(100% - 1px),0 calc(100% - 5px));}
  .stat{flex:1; text-align:center; padding:2px 4px;}
  .stat + .stat{border-left:1px solid var(--hair);}
  .stat b{display:block; font-size:13px; color:var(--green-ink); font-weight:700;}
  .stat span{font-size:9px; color:#6b7a6d;}

  /* ══ 吸顶工具列 ══ */
  /* 吸顶要让位给统一导航：--lab-nav-h 桌面 72px、手机 0（导航不吸顶时归零） */
  .tools{position:sticky; top:var(--lab-nav-h, 0px); z-index:10; padding:12px 16px 8px;
    background:linear-gradient(180deg, rgba(244,238,222,.99) 80%, rgba(244,238,222,0));}
  .findlbl{display:inline-block; font-family:'Playfair Display',serif; font-style:italic;
    font-size:13px; color:var(--cream); background:var(--green-ink); padding:4px 14px;
    transform:rotate(-2deg); margin-bottom:9px;}
  .toolrow{display:flex; gap:8px;}
  .search{position:relative; flex:1 1 auto;}
  .search input{width:100%; background:#fff; border:1px solid var(--hair);
    border-radius:9999px; padding:11px 14px 11px 36px; font-size:13px; color:#2a2a26;
    font-family:inherit; outline:none;}
  .search input::placeholder{color:#a09a8e;}
  .search input:focus{border-color:var(--green-ink);}
  .search svg{position:absolute; left:13px; top:50%; transform:translateY(-50%);
    width:14px; height:14px; stroke:#a09a8e; fill:none; stroke-width:2;}
  .selwrap{position:relative; flex:0 0 auto;}
  select{appearance:none; background:#fff; border:1px solid var(--hair);
    border-radius:9999px; padding:11px 30px 11px 15px; font-size:12.5px; color:#2a2a26;
    font-family:inherit; outline:none; cursor:pointer; max-width:130px;}
  .selwrap::after{content:""; position:absolute; right:13px; top:50%; margin-top:-2px;
    border-left:4px solid transparent; border-right:4px solid transparent;
    border-top:5px solid #8a8478; pointer-events:none;}
  .meta{font-size:10.5px; color:#8a8478; margin-top:8px; padding-left:4px;}
  .meta b{color:var(--green-ink); font-weight:700;}

  /* ══ 拍立得卡片格 ══ */
  .grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 10px; padding:6px 14px 0;}
  .card{background:#fff; padding:12px 12px 13px; box-shadow:0 3px 12px rgba(40,35,25,.10);
    display:flex; flex-direction:column;}
  .pol{background:#fff; padding:6px 6px 18px; border:1px solid #eee7da;
    box-shadow:0 4px 10px rgba(40,35,25,.12); margin-bottom:10px;}
  .card:nth-child(odd) .pol{transform:rotate(-1.6deg);}
  .card:nth-child(even) .pol{transform:rotate(1.4deg);}
  .face{aspect-ratio:1/1; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;}
  .face img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease;}
  /* 滑鼠移到卡片上，照片在拍立得框里轻轻放大（host 2026-09-15：不然有点单调） */
  .card:hover .face img{transform:scale(1.06);}
  .face .tag{position:absolute; left:6px; bottom:5px; font-size:8px; color:rgba(255,255,255,.9);
    background:rgba(20,25,20,.4); padding:2px 7px; border-radius:9999px;}
  .n{font-family:'Playfair Display','Noto Serif SC',serif; font-style:italic; font-weight:600;
    font-size:15px; color:#1c1917; line-height:1.3;}
  .chip{display:inline-block; font-size:9px; font-weight:700; color:var(--cream);
    background:var(--green-ink); padding:3px 9px; border-radius:2px; margin:6px 0 4px; align-self:flex-start;}
  .co{font-size:10.5px; color:#6b7a6d;}
  .bio{font-size:10px; color:#57504a; line-height:1.65; margin-top:6px;}
  .act{margin-top:auto; padding-top:10px; display:flex; align-items:center; gap:8px;}

  .bwrap{position:relative; display:inline-block;}
  .btn{position:relative; display:inline-flex; align-items:center; gap:5px; z-index:3;
    font-size:10.5px; font-weight:700; padding:6px 12px; border-radius:9999px; text-decoration:none;
    transition:transform .2s cubic-bezier(.34,1.4,.5,1); white-space:nowrap;}
  .btn.direct{background:var(--green-ink); color:var(--cream);}
  .btn.host{background:transparent; color:var(--green-ink); border:1px solid var(--hair);}
  .bwrap:hover .btn{transform:translateY(-2px);}
  .btn svg{width:11px; height:11px;}
  .bball{position:absolute; width:15px; height:15px; border-radius:50%;
    background:radial-gradient(circle at 32% 28%, #f3d96b, var(--ball) 60%, #cfa721);
    top:50%; right:-6px; margin-top:-7.5px; z-index:4; pointer-events:none;
    box-shadow:0 2px 7px rgba(0,0,0,.28); opacity:0;
    transform:translate(28px,-22px) scale(.5) rotate(-40deg);
    transition:all .40s cubic-bezier(.2,1.3,.4,1);}
  .bwrap:hover .bball{opacity:1; transform:translate(0,0) scale(1) rotate(0);}
  .bball i{position:absolute; width:2.4px; height:2.4px; border-radius:50%; background:rgba(120,96,20,.55);}
  .bring{position:absolute; inset:0; border-radius:9999px; z-index:1; pointer-events:none;
    border:1.5px solid rgba(31,74,56,.35); opacity:0;}
  .bwrap:hover .bring{animation:rip 1.6s cubic-bezier(.2,.6,.3,1) infinite .28s;}
  .bwrap:hover .bring.d2{animation-delay:.82s;}
  @keyframes rip{0%{transform:scale(1);opacity:.7} 70%{opacity:.1} 100%{transform:scale(1.65);opacity:0}}
  .more{font-size:10px; color:#6b7a6d; text-decoration:none;}
  .more:hover{color:var(--green-ink); text-decoration:underline;}
  .empty{text-align:center; padding:30px 20px; color:#8a8478; font-size:12px; display:none;}

  /* ══ 引言收尾 ══ */
  .quote{margin:28px 0 0; padding:26px 22px 28px; text-align:center; color:var(--cream);
    background:
      repeating-linear-gradient(52deg, rgba(255,255,255,.03) 0 1px, transparent 1px 8px),
      linear-gradient(165deg, #1c4437, var(--hero-dark));}
  .quote .q{font-family:'Noto Serif SC',serif; font-weight:700; font-size:17px; line-height:1.8;}
  .quote .q b{color:var(--ball);}
  .quote .sig{font-family:'Playfair Display',serif; font-style:italic; font-size:14px;
    color:var(--gold); margin-top:10px;}
  .quote .join{font-size:11.5px; color:rgba(244,238,222,.7); margin:18px 0 13px;}
  .btn.cta{background:var(--cream); color:var(--green-ink); font-size:13px; padding:11px 24px;}
  .bring.lt{border-color:rgba(244,238,222,.5); border-width:2px;}
  .bball.lg{width:20px; height:20px; right:-8px; margin-top:-10px;}
  .legal{font-size:9.5px; color:rgba(244,238,222,.5); line-height:1.7; margin-top:18px; text-align:left;}

/* ── 桌面：卡片格自动加栏，其余照设计稿 ── */
@media (min-width:560px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:16px 14px; padding:8px 22px 0;}
  .hero .inner{padding:44px 26px 30px;}
  .hero h1{font-size:clamp(38px,6vw,64px);}
  .hero .sub{font-size:clamp(13px,1.6vw,17px);}
  .stats{margin:-16px 22px 0; padding:16px 10px;}
  .stat b{font-size:15px;} .stat span{font-size:10px;}
  .tools{padding:16px 22px 10px;}
  .quote{padding:40px 26px 42px;}
  .quote .q{font-size:clamp(17px,2.2vw,24px);}
}

/* ── 触控装置：没有 hover，球直接停在位子上；涟漪不循环（省电） ── */
@media (hover:none){
  .bball{opacity:1; transform:translate(0,0) scale(1) rotate(0);}
  .bwrap:hover .bring{animation:none;}
}

/* ── 系统开「减少动态效果」：动画与过场全关 ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important;}
  .bball{opacity:1; transform:translate(0,0) scale(1) rotate(0);}
  .bwrap:hover .btn{transform:none;}
  .card:hover .face img{transform:none;}
}