/* ===== Base reset & typography ===== */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:#111; background:#fff; line-height:1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.container { max-width:1120px; margin:0 auto; padding:0 20px; }

/* ===== Header ===== */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.8);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(17,17,17,.08);
  transition: box-shadow .25s ease;
}
.header.scrolled{ box-shadow:0 10px 28px rgba(0,0,0,.08); }
.nav{ display:flex; height:56px; align-items:center; justify-content:space-between; }
.brand{ font-weight:700; letter-spacing:.3px; }
.menu{ display:none; gap:20px; list-style:none; margin:0; padding:0; }
.menu a{
  text-decoration:none; color:#222; font-size:14px;
  padding:6px 10px; border-radius:10px;
  transition: transform .18s ease, background-color .18s ease, opacity .18s ease;
}
.menu a:hover{ background:#f3f5f8; transform: translateY(-1px); }
@media (min-width:640px){ .menu{ display:flex; } }

/* ===== Hero ===== */
.hero{ position:relative; overflow:hidden; }
.hero .grid{ display:grid; gap:24px; align-items:center; padding:72px 0; }
@media (min-width:768px){ .hero .grid { grid-template-columns:3fr 1fr; } }
h1{ margin:0 0 6px; font-size:clamp(36px,5vw,56px); line-height:1.1; font-weight:700; letter-spacing:.2px; }
.lead{ color:#666; font-size:clamp(16px,2.1vw,20px); }
.cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.btn{
  border:1px solid #111; background:#111; color:#fff;
  padding:12px 18px; border-radius:16px; font-size:15px; text-decoration:none;
}
.btn.outline{ background:transparent; color:#111; }
.avatar{
  width:112px; height:112px; border-radius:999px; overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  border:1px solid rgba(17,17,17,.15); margin:0 auto;
}
@media (min-width:768px){ .avatar{ width:140px; height:140px; } }
.avatar img{ width:100%; height:100%; object-fit:cover; }

/* ===== Tiled (repeat-x) enlarged separators =====
   - 拼接型 SVG 横向平铺
   - 第一条（.top）向右滚动，第二条（.bottom）向左滚动
*/
.separator{
  position:relative; width:100%;
  height:clamp(180px, 30vh, 360px); /* 放大高度以填补空白 */
  overflow:hidden;
}
.sep-row{
  position:absolute; left:0; right:0;
  top:0; bottom:0;
  opacity:.85;
  /* 关键：平铺 + 以高度为基准，横向自动延展 */
  background-repeat: repeat-x;
  background-position: 0 center;
  background-size: auto 100%;
  will-change: background-position;
}

/* 方向：上→右；下→左 */
.sep-row.top    { animation: scroll-right 20s linear infinite; }
.sep-row.bottom { animation: scroll-left  20s linear infinite; }

/* 采用较大的位移，保证拼接图长时间不重复感 */
@keyframes scroll-right {
  from { background-position:    0   center; }
  to   { background-position: 2000px center; }
}
@keyframes scroll-left {
  from { background-position:    0   center; }
  to   { background-position: -2000px center; }
}

/* 减少动态偏好 */
@media (prefers-reduced-motion: reduce){
  .sep-row.top,.sep-row.bottom{ animation:none; }
}

/* ===== Sections / Cards / Grids ===== */
.section{ padding:72px 0; }
.section h2{ margin:0 0 12px; font-size:clamp(24px,3.6vw,34px); }
.card{
  border:1px solid rgba(17,17,17,.12);
  border-radius:22px;
  box-shadow:0 8px 18px rgba(0,0,0,.04);
  overflow:hidden;
}
.card .pad{ padding:20px; }

.grid-2{ display:grid; gap:24px; }
@media (min-width:900px){ .grid-2 { grid-template-columns:1fr 1fr; } }
.grid-12{ display:grid; gap:24px; }
@media (min-width:900px){ .grid-12 { grid-template-columns:7fr 5fr; } }

/* ===== Media ===== */
.video{ width:100%; height:320px; object-fit:cover; display:block; }
.audio{ width:100%; margin-top:10px; }
.badge{ display:inline-flex; gap:6px; align-items:center; font-size:13px; color:#666; }

/* ===== Gallery ===== */
.gallery{
  display:grid; gap:12px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width:900px){ .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery img{
  width:100%; height:220px; object-fit:cover;
  border-radius:16px; border:1px solid rgba(17,17,17,.12);
  box-shadow:0 4px 12px rgba(0,0,0,.04);
  cursor:pointer;
}

/* ===== Lightbox ===== */
.lightbox{
  position:fixed; inset:0;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  display:none; align-items:center; justify-content:center;
  padding:24px; z-index:80;
}
.lightbox.show{ display:flex; }
.lightbox img{
  max-width:90vw; max-height:80vh;
  border-radius:22px; border:1px solid rgba(17,17,17,.12);
  box-shadow:0 12px 40px rgba(0,0,0,.2);
}

/* ===== Footer ===== */
.footer{
  border-top:1px solid rgba(17,17,17,.08);
  padding:28px 0; color:#666; font-size:14px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
}


/* === Unify paragraph typography === */
:root{
    --para-size: 20px;        /* 统一段落字号，可按需改 16/18 等 */
  }
  
  /* 段落与列表项：统一字体、字号、颜色 */
  p,
  li {
    font-family: inherit;      /* 和 body 保持一致 */
    font-size: var(--para-size);
    color: #111;               /* 统一黑色 */
    line-height: 1.8;          /* 更好的可读性 */
  }
  
  /* 之前 .lead 用了灰色和自适应尺寸，这里统一成普通段落 */
  .lead {
    font-family: inherit;
    font-size: var(--para-size);
    color: #111;
    font-weight: 400;          /* 保持常规字重，如需更醒目可调 500 */
  }
  
  /* 列表容器（如 Awards）可保持默认，只确保继承颜色与字号 */
  ul, ol {
    margin: 0;
    padding-left: 18px;
    color: #111;
    font-size: var(--para-size);
  }