/* LAB — 站点样式。规则来源：design-system/readme.md
   容器零圆角零阴影零边框；CTA 一律 pill；深度只来自照片与 1px hairline；
   brass 每屏最多一次；category accent 只进 chip / soft tile / editorial 时刻。 */

/* ============ 布局基元 ============ */
/* hidden 属性必须赢过任何 display 声明（.empty-state 等 flex 容器） */
[hidden]{display:none !important}
.container{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter)}
@media (min-width:1920px){.container{padding-inline:var(--gutter-wide)}}
.section{margin-block:var(--space-section)}
.section-head{display:flex;flex-direction:column;gap:var(--space-sm);margin-bottom:var(--space-xl)}
.section-label{
  font-family:var(--font-mono);
  font-size:var(--type-caption-sm-size);
  line-height:var(--type-caption-sm-lh);
  font-weight:var(--weight-medium);
  text-transform:uppercase;
  color:var(--text-muted);
}
.section-title{font-size:var(--type-h-xl-size);line-height:var(--type-h-xl-lh)}
.section-note{color:var(--text-muted);font-size:var(--type-caption-md-size);line-height:var(--type-caption-md-lh)}

/* ============ 导航 ============ */
/* 2026-09-15 起全站统一为 nav.css 的 .lab-nav（scripts/nav_snippet.py 注入），
   旧的 .site-nav / .nav-inner / .wordmark / .nav-links 规则已随之移除。 */

/* ============ Pill CTA ============ */
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-ui);font-weight:var(--weight-medium);
  font-size:var(--type-button-md-size);line-height:var(--type-button-md-lh);
  min-height:48px;padding:0 32px;
  border:none;outline:none;cursor:pointer;
  border-radius:var(--radius-lg);
  background:var(--ink);color:var(--on-primary);
  text-decoration:none;white-space:nowrap;
  transform-origin:center;
  transition:transform var(--duration-press) var(--ease-standard),opacity var(--duration-press) var(--ease-standard);
}
.pill:hover{color:var(--on-primary);opacity:.92}
.pill:active{transform:var(--press-transform);opacity:var(--press-opacity)}
.pill--secondary{background:var(--soft-cloud);color:var(--ink)}
.pill--secondary:hover{color:var(--ink)}
.pill--on-image{background:var(--canvas);color:var(--ink);min-height:auto;padding:12px 24px}
.pill--on-image:hover{color:var(--ink)}
.pill--sm{min-height:40px;padding:0 20px;font-size:var(--type-button-sm-size);line-height:var(--type-button-sm-lh)}
.pill--static{cursor:default;background:var(--soft-cloud);color:var(--text-muted)}
.pill--static:active{transform:none;opacity:1}
.pill--static:hover{opacity:1}

/* ============ Chips ============ */
.chip{
  display:inline-flex;align-items:center;
  font-size:var(--type-caption-sm-size);line-height:var(--type-caption-sm-lh);
  font-weight:var(--weight-medium);
  padding:var(--space-xxs) var(--space-md);border-radius:var(--radius-lg);
  white-space:nowrap;
}
.chip--slb{background:var(--accent-court-soft);color:var(--accent-court)}
.chip--dlb{background:var(--accent-pour-soft);color:var(--accent-pour)}
.chip--plain{border:1px solid var(--hairline);color:var(--text-muted)}

/* filter chip：默认 hairline 描边，激活整体反转 */
.filter-row{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center}
.filter-chip{
  display:inline-flex;align-items:center;
  font-size:var(--type-caption-sm-size);line-height:var(--type-caption-sm-lh);
  font-weight:var(--weight-medium);
  min-height:32px;padding:0 16px;
  border-radius:var(--radius-lg);
  border:1px solid var(--hairline);
  background:var(--canvas);color:var(--ink);
  cursor:pointer;
  transition:transform var(--duration-press) var(--ease-standard),opacity var(--duration-press) var(--ease-standard);
}
.filter-chip:active{transform:var(--press-transform);opacity:var(--press-opacity)}
.filter-chip[aria-pressed="true"]{background:var(--ink);color:var(--on-primary);border-color:var(--ink)}
.filter-select{
  font-family:var(--font-ui);font-size:var(--type-caption-md-size);
  min-height:32px;padding:0 14px;
  border-radius:var(--radius-md);
  border:1px solid var(--hairline);
  background:var(--canvas);color:var(--ink);
}
.filter-select:focus{outline:none;border:var(--focus-border);box-shadow:var(--focus-glove)}

/* ============ Hero（campaign tile）============ */
.hero{position:relative;min-height:clamp(440px,58vh,600px);background:var(--surface-stage);overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,25,23,0) 45%,rgba(28,25,23,.55) 100%)}
.hero-content{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  gap:var(--space-xl);padding:clamp(24px,4vw,48px);
}
.hero-eyebrow{
  font-family:var(--font-mono);font-size:var(--type-caption-sm-size);
  font-weight:var(--weight-medium);text-transform:uppercase;
  border-bottom:2px solid var(--brass);padding-bottom:4px;
}
.hero-title{
  font-family:var(--font-display-mix);font-weight:var(--weight-medium);
  font-size:clamp(40px,7vw,96px);line-height:var(--type-display-lh);
  text-transform:uppercase;
  max-width:16ch;
}
.hero-meta{font-family:var(--font-mono);font-size:var(--type-caption-md-size);line-height:var(--type-caption-md-lh)}
.hero-sub{font-size:var(--type-h-md-size);line-height:1.6;max-width:36ch}
.hero-ctas{display:flex;gap:var(--space-md);flex-wrap:wrap}
.hero--photo .hero-eyebrow,.hero--photo .hero-title,.hero--photo .hero-meta{color:var(--on-primary)}
.hero--photo .hero-sub{color:var(--on-primary)}
.hero--stage .hero-eyebrow,.hero--stage .hero-title,.hero--stage .hero-meta{color:var(--ink)}
.hero--stage .hero-sub{color:var(--text-body)}
.hero--stage .hero-scrim{display:none}

/* 下一场窄横幅（fix-v2 §1） */
.next-strip{border-bottom:var(--divider-hairline)}
.next-strip-line{font-family:var(--font-mono);font-size:var(--type-caption-md-size);line-height:var(--type-caption-md-lh);color:var(--text-body);padding-block:var(--space-md);margin:0}

/* 第一次来？（fix-v2 §2） */
.fact-list{list-style:none;margin:0;padding:0;max-width:560px}
.fact-list li{padding-block:var(--space-md);border-bottom:var(--divider-hairline);color:var(--text-body)}
.fact-list li:first-child{border-top:var(--divider-hairline)}

/* 双路 CTA（fix-v2 §3） */
.dual-cta{display:flex;flex-direction:column;gap:var(--space-md);align-items:flex-start;margin-top:var(--space-xl)}
.dual-cta p{color:var(--text-body);display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap;margin:0}

/* 照片墙（fix-v2 §6） */
.gallery-wall{columns:2;column-gap:var(--space-sm)}
@media (min-width:768px){.gallery-wall{columns:3}}
@media (min-width:1200px){.gallery-wall{columns:4}}
.gallery-wall img{width:100%;display:block;margin-bottom:var(--space-sm);background:var(--surface-stage)}
#gallery-more{margin-top:var(--space-md)}

/* 成交簿 + testimonials（fix-v2 §8） */
.grid-stories{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.story-card{border-top:var(--divider-hairline);padding-top:var(--space-md);display:flex;flex-direction:column;gap:var(--space-sm)}
.story-text{color:var(--text-body)}
.story-card--quote .story-text{font-family:var(--font-display-mix);font-size:var(--type-h-lg-size);line-height:1.4;color:var(--ink)}
.story-members{font-size:var(--type-caption-sm-size);color:var(--text-muted)}

/* About 收尾 + host 的话（fix-v2 §7） */
.closing-line{font-family:var(--font-display-mix);font-style:italic;font-size:var(--type-h-lg-size);color:var(--ash)}
.host-words{display:flex;gap:var(--space-xl);align-items:flex-start;flex-wrap:wrap}
.host-words img{width:160px;height:160px;object-fit:cover;background:var(--surface-stage)}

/* ============ 卡片（零 radius 零阴影零内边距，照片即卡片）============ */
.card-grid{display:grid;gap:var(--space-xl) var(--space-sm)}
.grid-events{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.grid-members{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
@media (max-width:480px){
  .grid-events,.grid-members{grid-template-columns:1fr 1fr}
  .grid-events{grid-template-columns:1fr}
}

.event-card{display:flex;flex-direction:column;gap:var(--space-sm)}
.card-media{position:relative;aspect-ratio:3/2;background:var(--surface-stage);overflow:hidden}
/* img 与占位层同为 absolute：加载成功盖住占位，失败被 JS 移除露出占位 */
.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-media .media-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--hairline)}
.event-card .card-title{font-size:var(--type-h-md-size);line-height:1.4;font-weight:var(--weight-medium);font-family:var(--font-ui)}
.card-meta{display:flex;flex-direction:column;gap:var(--space-sm)}
.meta-line{font-size:var(--type-caption-md-size);line-height:var(--type-caption-md-lh);color:var(--text-muted)}
.meta-line--mono{font-family:var(--font-mono);color:var(--text-body)}
.meta-line a{color:inherit}
.fee-line{font-family:var(--font-mono);font-size:var(--type-caption-md-size);color:var(--ink)}
.chip-row{display:flex;gap:var(--space-xs);flex-wrap:wrap}
.card-cta{margin-top:var(--space-xs)}
.recap-line{font-size:var(--type-caption-md-size);line-height:var(--type-caption-md-lh);color:var(--text-body)}

.member-card{display:flex;flex-direction:column;gap:var(--space-sm)}
.avatar-stage{position:relative;aspect-ratio:1/1;background:var(--surface-stage);overflow:hidden}
.avatar-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avatar-initials{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:var(--weight-medium);
  font-size:clamp(40px,6vw,64px);color:var(--stone);
}
.member-name{font-family:var(--font-ui);font-weight:var(--weight-medium);font-size:var(--type-h-md-size);line-height:1.4}
.member-biz{font-size:var(--type-caption-md-size);color:var(--text-body)}
.member-industry{font-size:var(--type-caption-sm-size);color:var(--text-muted)}
.member-intro{font-size:var(--type-caption-md-size);line-height:var(--type-caption-md-lh);color:var(--text-body)}
.member-contact{margin-top:var(--space-xs)}

/* ============ Track 卡（category soft tile）============ */
.track-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm)}
@media (max-width:768px){.track-cards{grid-template-columns:1fr}}
.track-card{padding:clamp(24px,4vw,48px);display:flex;flex-direction:column;gap:var(--space-md);min-height:280px;justify-content:flex-end}
.track-card--slb{background:var(--accent-court-soft)}
.track-card--dlb{background:var(--accent-pour-soft)}
.track-name{font-family:var(--font-ui);font-weight:var(--weight-medium);font-size:var(--type-h-md-size)}
.track-schedule{
  font-family:var(--font-display-mix);font-weight:var(--weight-semibold);
  font-size:clamp(28px,4.5vw,56px);line-height:1.1;
}
.track-blurb{color:var(--text-body)}
.track-link{font-size:var(--type-caption-md-size)}

/* ============ 免责声明 / 提示行 ============ */
.disclaimer{font-size:var(--type-caption-md-size);line-height:var(--type-caption-md-lh);color:var(--text-muted)}

/* ============ 稀疏状态 ============ */
.empty-state{padding:var(--space-section) 0;display:flex;flex-direction:column;gap:var(--space-md)}

/* ============ About / 长文 ============ */
.prose{max-width:640px;display:flex;flex-direction:column;gap:var(--space-lg)}
.prose p{color:var(--text-body)}
.stat-row{display:flex;gap:var(--space-section);flex-wrap:wrap}
.stat .stat-num{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--type-h-xl-size);line-height:var(--type-h-xl-lh)}
.stat .stat-label{font-size:var(--type-caption-md-size);color:var(--text-muted)}

/* FAQ disclosure rows */
.faq{max-width:640px}
.faq details{border-bottom:var(--divider-hairline)}
.faq details:first-of-type{border-top:var(--divider-hairline)}
.faq summary{
  cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);
  padding:var(--space-xl) 0;
  font-family:var(--font-ui);font-weight:var(--weight-medium);font-size:var(--type-h-md-size);line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);color:var(--text-muted)}
.faq details[open] summary::after{content:"−"}
.faq .faq-body{padding:0 0 var(--space-xl);color:var(--text-body);max-width:56ch}

/* ============ 表单 ============ */
.form{max-width:560px;display:flex;flex-direction:column;gap:var(--space-xl)}
.field{display:flex;flex-direction:column;gap:var(--space-xs)}
.field label{font-weight:var(--weight-medium);font-size:var(--type-caption-md-size)}
.field .hint{font-size:var(--type-caption-sm-size);color:var(--text-muted)}
.field input[type="text"],.field input[type="tel"],.field textarea,.field select{
  font-family:var(--font-ui);font-size:var(--type-body-size);line-height:var(--type-body-lh);
  color:var(--ink);background:var(--canvas);
  border:1px solid var(--hairline);
  border-radius:var(--radius-md);
  padding:12px 16px;
}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border:var(--focus-border);box-shadow:var(--focus-glove)}
.field .char-count{font-family:var(--font-mono);font-size:var(--type-caption-sm-size);color:var(--text-muted);align-self:flex-end}
.check-field{display:flex;gap:var(--space-md);align-items:flex-start}
.check-field input[type="checkbox"]{width:18px;height:18px;margin:2px 0 0;accent-color:var(--ink);flex:none}
.check-field .check-text{font-size:var(--type-caption-md-size);line-height:var(--type-caption-md-lh);color:var(--text-body)}
.field-error{font-size:var(--type-caption-sm-size);color:var(--danger)}
.form-status{font-size:var(--type-caption-md-size);line-height:var(--type-caption-md-lh)}
.form-status--ok{color:var(--positive)}
.form-status--err{color:var(--danger)}
.photo-preview{width:120px;height:120px;object-fit:cover;background:var(--surface-stage)}
/* honeypot：人类不可见不可达 */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ============ 弹窗（请 Ariest 介绍）============ */
dialog.referral-dialog{
  border:none;border-radius:var(--radius-none);
  background:var(--canvas);color:var(--ink);
  padding:var(--space-section);
  max-width:480px;width:calc(100% - 2*var(--gutter));
}
dialog.referral-dialog::backdrop{background:rgba(28,25,23,.5)}
.dialog-title{font-size:var(--type-h-lg-size);line-height:var(--type-h-lg-lh);margin-bottom:var(--space-sm)}
.dialog-sub{font-size:var(--type-caption-md-size);color:var(--text-muted);margin-bottom:var(--space-xl)}
.dialog-actions{display:flex;gap:var(--space-md);margin-top:var(--space-sm);flex-wrap:wrap}

/* ============ Footer ============ */
.site-footer{border-top:var(--divider-hairline);margin-top:var(--space-section)}
.footer-inner{display:flex;flex-wrap:wrap;gap:var(--space-section);padding-block:var(--space-section)}
.footer-col{display:flex;flex-direction:column;gap:var(--space-sm);min-width:160px}
.footer-col .col-head{font-family:var(--font-mono);font-size:var(--type-caption-sm-size);text-transform:uppercase;color:var(--text-muted)}
.footer-col a{font-size:var(--type-caption-md-size);color:var(--text-muted);text-decoration:none}
.footer-col a:hover{color:var(--brass-deep)}
.footer-brand{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:22px}
.footer-tag{font-size:var(--type-caption-md-size);color:var(--text-muted);max-width:32ch}
.fine-print{
  border-top:var(--divider-hairline);
  padding-block:var(--space-md);
  display:flex;flex-wrap:wrap;gap:var(--space-md);justify-content:space-between;
  font-size:var(--type-caption-sm-size);color:var(--text-muted);
}

/* ============ CTA 悬停出球（design-system/lab-cta-hover-ball.html 版本 1）============
   纯 CSS、零标记改动：::after = 匹克球（radial-gradient 打三个孔），::before = 涟漪圈。
   因为挂在类上，JS 动态生成的按钮（RSVP / 请 Ariest 介绍 / filter chip）自动继承。
   排除：.pill--static（Fully booked 不可点）、gallery 照片格与 lightbox 箭头（图标控件）。 */
.pill:not(.pill--static),
.filter-chip{position:relative;--ball-size:22px}
.pill--sm:not(.pill--static){--ball-size:16px}
.filter-chip{--ball-size:14px}

.pill:not(.pill--static)::after,
.filter-chip::after{
  content:"";position:absolute;pointer-events:none;z-index:2;
  width:var(--ball-size);height:var(--ball-size);
  top:50%;right:calc(var(--ball-size) / -2.6);margin-top:calc(var(--ball-size) / -2);
  border-radius:var(--radius-full);
  background:
    radial-gradient(circle at 30% 34%, var(--ball-hole) 1.7px, transparent 1.8px),
    radial-gradient(circle at 62% 24%, var(--ball-hole) 1.7px, transparent 1.8px),
    radial-gradient(circle at 44% 62%, var(--ball-hole) 1.7px, transparent 1.8px),
    var(--ball);
  opacity:0;
  transform:translate(40px,-34px) scale(.5) rotate(-40deg);
  transition:opacity .42s var(--ease-ball), transform .42s var(--ease-ball);
}
.pill:not(.pill--static):hover::after,
.pill:not(.pill--static):focus-visible::after,
.filter-chip:hover::after,
.filter-chip:focus-visible::after{opacity:1;transform:translate(0,0) scale(1) rotate(0deg)}

/* 涟漪：球「打」在按钮上荡开的圈 */
.pill:not(.pill--static)::before,
.filter-chip::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;border:2px solid var(--ripple);opacity:0;
}
.pill:not(.pill--static):hover::before,
.filter-chip:hover::before{animation:lab-ripple 1.6s cubic-bezier(.2,.6,.3,1) infinite .28s}
@keyframes lab-ripple{
  0%{transform:scale(1);opacity:.8}
  70%{opacity:.1}
  100%{transform:scale(1.75);opacity:0}
}

/* 手机没有 hover：主 CTA 的球常驻（小按钮与 filter chip 不驻，免得满屏是球） */
@media (hover:none){
  .pill:not(.pill--static):not(.pill--sm)::after{opacity:1;transform:translate(0,0) scale(1) rotate(0deg)}
  .pill--sm::after,.filter-chip::after{display:none}
  .pill::before,.filter-chip::before{display:none}
}

/* 尊重系统「减少动态效果」 */
@media (prefers-reduced-motion:reduce){
  .pill::after,.filter-chip::after{transition:none}
  .pill::before,.filter-chip::before{display:none}
}