/* SHARK EP — 参考 apple.com.cn/iphone-17-pro 章节节奏 */
:root {
  --black: #000;
  --ink: #1d1d1f;
  --gray: #f5f5f7;
  --white: #fff;
  --muted: rgba(0, 0, 0, 0.56);
  --muted2: rgba(0, 0, 0, 0.48);
  --muted-dark: rgba(255, 255, 255, 0.64);
  /* 主题红：对齐鱼鳍血红边线 */
  --accent: #c41e3a;
  --accent-hover: #a81832;
  --blue: var(--accent);
  --link: #c41e3a;
  --link-dark: #ff5a6e;
  --fin-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2028%2016%27%20fill%3D%27none%27%3E%3Cg%20transform%3D%27translate%2828%200%29%20scale%28-1%201%29%27%3E%3Cpath%20d%3D%22M2.2%209.2C5.2%206.2%2010.2%204.6%2015.2%205.2c2.4.3%204.6%201.1%206.6%202.1l3.4-1.3-1.5%202.4%201.9%201.5-3.8.2c-2.6.1-5.2.8-7.4%202.1-2.4%201.4-5.3%201.6-8.1.4L2%2011.8l.2-2.6z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M11.2%205.4L13.6.9l2.5%204.3%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M13.6.9L16.1%205.2%22%20stroke%3D%22%23ff8a96%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%225.1%22%20cy%3D%228.4%22%20r%3D%22.55%22%20fill%3D%22%231a1a1a%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --font: "SF Pro Display", "SF Pro Text", "PingFang SC", "Microsoft YaHei",
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --max: 980px;
  --wide: 1080px;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--gray);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47059;
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }

.nav {
  position: sticky; top: 0; z-index: 70;
  height: 48px;
  background: rgba(22, 22, 23, 0.86);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.nav-inner {
  max-width: 1024px; margin: 0 auto; height: 100%;
  padding: 0 22px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: #f5f5f7;
  min-width: 0;
}
.nav a { color: #f5f5f7; opacity: .8; text-decoration: none; }
.nav a:hover { opacity: 1; text-decoration: none; }
.nav-brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; letter-spacing: .08em; opacity: 1 !important; flex-shrink: 0;
}
.nav-brand .brand-logo { width: 22px; height: 22px; display: block; flex-shrink: 0; }
.nav-brand:not(:has(.brand-logo))::before {
  content: "";
  width: 22px; height: 22px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M25.96 16.87A10 10 0 1 1 20.7 7.17' stroke='%23F5F5F7' stroke-width='3.2' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='16' r='3.2' fill='%230EA5E9'/%3E%3Ccircle cx='24.66' cy='11' r='2.15' fill='%23C41E3A'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nav-links { display: flex; gap: 22px; align-items: center; min-width: 0; }
.nav-links a, .nav-user { white-space: nowrap; }
.nav-buy {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 10px; border-radius: 980px;
  background: var(--accent); color: #fff !important; opacity: 1 !important;
}
.nav-buy::before {
  content: "";
  width: 18px; height: 11px; flex-shrink: 0;
  background: var(--fin-icon) center / contain no-repeat;
}
.nav-buy:hover { background: var(--accent-hover); }

/* iPhone 产品页式分段导航 */
.subnav {
  position: sticky; top: 48px; z-index: 65;
  background: rgba(245, 245, 247, 0.86);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.subnav-inner {
  max-width: var(--wide); margin: 0 auto;
  padding: 0 16px;
  display: flex; gap: 4px; overflow-x: auto;
  scrollbar-width: none;
}
.subnav-inner::-webkit-scrollbar { display: none; }
.subnav a {
  flex: 0 0 auto;
  padding: 12px 14px;
  font-size: 12px; font-weight: 500;
  color: var(--ink); opacity: .55; text-decoration: none;
  white-space: nowrap;
}
.subnav a:hover { opacity: 1; text-decoration: none; }

.hero {
  position: relative;
  min-height: calc(100vh - 48px);
  display: grid; place-items: center;
  overflow: hidden; background: #000; color: #fff; text-align: center;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.78) 100%);
}
.hero-copy { position: relative; z-index: 2; padding: 56px 22px 72px; max-width: 720px; }
.eyebrow {
  margin: 0 0 8px;
  font-size: 19px; font-weight: 600; letter-spacing: .01em;
}
.headline {
  margin: 0;
  font-size: clamp(48px, 10vw, 80px);
  font-weight: 600; letter-spacing: -.025em; line-height: 1.05;
}
.en {
  margin-top: 8px;
  font-size: 18px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--muted-dark);
}
.subhead {
  margin: 16px auto 0;
  max-width: 28em;
  font-size: 19px; line-height: 1.42; color: var(--muted-dark);
}
.cta-row {
  margin-top: 22px;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 22px;
  font-size: 17px;
}
.cta-row a { color: var(--link-dark); }
.btn-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px 11px 18px; border-radius: 980px;
  background: var(--accent); color: #fff !important;
  text-decoration: none !important;
}
.btn-pill::before {
  content: "";
  width: 18px; height: 11px; flex-shrink: 0;
  background: var(--fin-icon) center / contain no-repeat;
}
.btn-pill:hover { background: var(--accent-hover); }

/* 章节：词 + 意向卡 */
.chapter {
  padding: 88px 22px;
}
.chapter--light { background: var(--gray); color: var(--ink); }
.chapter--dark { background: var(--black); color: var(--white); }
.chapter--white { background: var(--white); color: var(--ink); }

.chapter-grid {
  max-width: var(--wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(200px, 320px) minmax(280px, 1fr);
  gap: 48px 56px;
  align-items: center;
}
.chapter-grid.reverse { grid-template-columns: minmax(280px, 1fr) minmax(200px, 320px); }
.chapter-grid.reverse .chapter-card { order: 2; }
.chapter-grid.reverse .chapter-copy { order: 1; }

@media (max-width: 860px) {
  .nav {
    height: auto;
    min-height: 48px;
  }
  .nav-inner {
    padding: 8px 14px;
    gap: 10px;
  }
  .nav-links {
    gap: 8px;
    flex: 1;
    justify-content: flex-end;
  }
  /* 手机顶栏只留品牌 + 登录/退出，避免汉字被挤成竖排 */
  body.hub-page .nav-links > a:not(.nav-login):not(.nav-logout) {
    display: none;
  }
  body.player-page .nav-links > a:not(.nav-login):not(.nav-logout) {
    display: none;
  }
  .nav-user { display: none; }
  .nav-buy { padding: 5px 12px; }
  .nav-buy::before { display: none; }

  .chapter-grid,
  .chapter-grid.reverse {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 28px;
  }
  .chapter-grid.reverse .chapter-card,
  .chapter-grid.reverse .chapter-copy { order: initial; }
  .chapter-copy { text-align: center; }
  .lyrics { text-align: left; }
}

.chapter-card {
  width: min(320px, 78vw);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  background: #111;
  line-height: 0;
}
.chapter-card img { width: 100%; }

.chapter-kicker {
  margin: 0 0 8px;
  font-size: 14px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  opacity: .55;
}
.chapter-title {
  margin: 0;
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 600; letter-spacing: -.02em; line-height: 1.1;
}
.chapter-lead {
  margin: 12px 0 0;
  font-size: 19px; line-height: 1.4;
  color: var(--muted);
  max-width: 28em;
}
.chapter--dark .chapter-lead { color: var(--muted-dark); }

.lyrics {
  margin: 28px 0 0;
  font-size: 21px; font-weight: 400;
  line-height: 1.62; letter-spacing: -.01em;
  white-space: pre-wrap;
}

.closer {
  padding: 100px 22px;
  text-align: center;
  background: var(--white);
}
.closer .headline { font-size: clamp(36px, 6vw, 52px); }
.closer .subhead { color: var(--muted); }

.foot {
  background: var(--gray);
  border-top: 1px solid rgba(0,0,0,.08);
  padding: 28px 22px 48px;
  font-size: 12px; color: var(--muted2); line-height: 1.55;
}
.foot-inner {
  max-width: var(--max); margin: 0 auto;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.foot a { color: var(--link); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}