/* v2 预览：在原 styles.css 之后加载，只做覆盖，不改原样式文件。
   删除 index.html 中对本文件的引用即可回到原版样式。 */

/* ---------- [1] 首屏：价值主张 + 背书前置 ---------- */
.hero{min-height:auto;padding-top:56px;padding-bottom:48px}
.hero-media img{height:62vh;min-height:480px}

.proof-strip{display:grid;grid-template-columns:repeat(4,1fr) auto;align-items:stretch;margin:0 6vw;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof-strip div{display:flex;flex-direction:column;justify-content:center;padding:22px 24px;border-left:1px solid var(--line)}
.proof-strip div:first-child{padding-left:0;border-left:0}
.proof-strip strong{display:block;font-family:var(--serif);font-size:24px;font-weight:400;line-height:1.3;letter-spacing:.04em;color:var(--ink)}
.proof-strip .proof-num{font-family:Georgia,"Times New Roman",serif;font-style:italic;color:var(--gold);letter-spacing:0}
.proof-strip span{display:block;margin-top:4px;font-size:13px;line-height:1.6;color:var(--muted)}
.proof-link{align-self:center;padding-left:24px;font-family:var(--sans);font-size:11px;letter-spacing:.18em;color:var(--gold);white-space:nowrap}

/* ---------- [2] 预约路径：顶部按钮 / 可点击联系方式 / 手机端悬浮栏 ---------- */
.nav{align-items:center}
.nav .header-cta{padding:8px 18px;border:1px solid var(--ink);border-radius:999px;color:var(--ink);letter-spacing:.16em;transition:background .2s,color .2s}
.nav .header-cta:hover{background:var(--ink);color:#fff}

.contact-card p{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 12px}
.contact-card strong{flex:none}
.contact-card a{border-bottom:1px solid rgba(215,189,127,.4)}
.contact-card .contact-action{margin-left:auto;padding:0 0 2px;border:0;border-bottom:1px solid rgba(215,189,127,.45);border-radius:0;background:none;color:var(--gold-soft);font-family:var(--sans);font-size:11px;letter-spacing:.24em;line-height:1.6;cursor:pointer;transition:border-color .2s,color .2s}
.contact-card .contact-action:hover{color:#f4efe7;border-color:#f4efe7}
.contact-card .contact-note{display:block;margin:28px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:15px;line-height:1.8;color:rgba(255,255,255,.62)}

.mobile-cta{display:none}
.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));z-index:30;max-width:calc(100% - 40px);padding:10px 18px;border-radius:999px;background:rgba(40,35,29,.94);color:#fff;font-family:var(--sans);font-size:13px;letter-spacing:.04em;text-align:center;opacity:0;transform:translate(-50%,8px);transition:opacity .25s,transform .25s;pointer-events:none}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* ---------- [3] 桌面端：空间 / 合作卡片去掉大块留白 ---------- */
@media (min-width:641px){
  /* 原 .space-card div 的内边距误作用到了图片容器上，导致图片四周出现色带 */
  .space-card .image-shell{padding:0;background:var(--paper-2)}
  .space-card .landscape-shell,.space-card .portrait-shell{aspect-ratio:auto}
  .space-card .image-shell img{height:auto}
}
@media (min-width:1001px){
  /* 空间：Studio A 通栏横排；Studio B 两张按原图比例 3:2 与 1:1 并排，等高且不裁切 */
  .space-grid{grid-template-columns:1.5fr 1fr}
  .space-card.large{grid-column:1 / -1;grid-row:auto;display:grid;grid-template-columns:1.5fr 1fr;align-items:end}
  .space-card.large > div:last-child{padding:40px 44px 44px;background:none}
  .space-card.large h3{font-size:34px}

  /* 合作：6 列网格，消除右侧空卡与末行孤卡 */
  .collab-grid{grid-template-columns:repeat(6,1fr)}
  .collab-card{grid-column:span 2;display:flex;flex-direction:column}
  .collab-card.wide{grid-column:span 4}
  .collab-card > div:last-child{flex:1}
  .collab-card .portrait-shell{aspect-ratio:auto}
  .collab-card .portrait-shell img{height:auto}

  .collab-card.split{display:grid;align-items:end}
  .collab-card.split > div:last-child{flex:none;padding:32px 30px}
  /* 郎朗主卡：图片随行高填满，与右侧林迈可卡片等高 */
  .collab-card.wide.split{grid-template-columns:2fr 1fr}
  .collab-card.wide.split .image-shell{align-self:stretch}
  .collab-card.wide.split .image-shell img{height:100%;object-fit:cover}
}

/* ---------- v2.1 新增内容 ---------- */
/* 合作区第 2、3 行：按原图比例分配列宽，同一行图片等高、不裁切、无色带 */
.collab-row{display:contents}
@media (min-width:1001px){
  .collab-row{grid-column:1 / -1;display:grid;grid-template-columns:1.5fr 1.333fr 1.5fr;gap:24px}
  .collab-row-mixed{grid-template-columns:1.333fr 1fr .75fr}
  .collab-row > .collab-card{grid-column:auto}
  .collab-row .image-shell{aspect-ratio:auto}
  .collab-row .image-shell img{height:auto}
}

/* 代表作品：影视推广曲 / 主题曲 + 取景地 */
.ost-block{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:center;margin:8px 0 40px;padding:36px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ost-media{margin:0}
.ost-media img{border-radius:22px;box-shadow:var(--shadow);background:var(--paper-2)}
.ost-media figcaption{margin-top:14px;font-size:14px;color:var(--soft-ink)}
.ost-media figcaption span,.ost-list li span{color:var(--muted)}
.ost-media figcaption span{margin-right:12px;font-family:var(--sans);font-size:11px;letter-spacing:.18em;color:var(--gold)}
.ost-list h3{margin:0 0 18px;font-size:30px;font-weight:300;line-height:1.3;letter-spacing:.02em;text-wrap:balance}
.ost-list ul{list-style:none;margin:0;padding:0}
.ost-list li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 16px;padding:16px 0;border-top:1px solid var(--line)}
.ost-list li strong{font-weight:400;font-size:21px;color:var(--ink)}
.ost-list li span{font-size:14px}

/* 录音花絮：沿用全站浅色面板 + 横向滚动 */
.session-section{overflow:hidden}
.session-viewport{position:relative;margin:0 -6vw}
.session-track{display:flex;width:max-content;margin:0;padding:0;list-style:none}
.session-item{flex:none;height:clamp(320px,30vw,460px);margin-right:20px;border-radius:18px;overflow:hidden;background:var(--paper-2);box-shadow:0 14px 40px rgba(50,35,18,.10)}
.session-item img{width:auto;max-width:none;height:100%}
@keyframes session-marquee{to{transform:translateX(-50%)}}
@media (min-width:1001px){
  .session-viewport{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .session-track{animation:session-marquee var(--session-duration,100s) linear infinite}
  .session-viewport:hover .session-track,.session-viewport.is-offscreen .session-track{animation-play-state:paused}
}
@media (min-width:1001px) and (prefers-reduced-motion:reduce){
  .session-viewport{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .session-track{animation:none;padding:0 6vw}
  .session-item.is-clone{display:none}
}
@media (max-width:1000px){
  .ost-block{grid-template-columns:1fr;gap:24px}
  .session-viewport{margin:0 -22px;padding:0 22px;scroll-padding:0 22px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .session-viewport::-webkit-scrollbar{display:none}
  .session-item{height:320px;margin-right:12px;scroll-snap-align:start}
  .session-item.is-clone{display:none}
}
@media (max-width:640px){
  .ost-block{margin:0 0 28px;padding:24px 0}
  .ost-list h3{font-size:24px}
  .ost-list li strong{font-size:18px}
  .ost-list li span{font-size:13px}
  .ost-media img{border-radius:18px}
  .session-viewport{margin:0 -20px;padding:0 20px;scroll-padding:0 20px}
  .session-item{height:240px;border-radius:14px}
}
@media (max-width:390px){.session-viewport{margin:0 -16px;padding:0 16px;scroll-padding:0 16px}}

/* 小红书入口：文字链接，不外露网址 */
.session-more{margin:32px 0 0;text-align:right}
.session-more a{display:inline-flex;align-items:center;gap:12px;padding-bottom:4px;border-bottom:1px solid var(--line);font-family:var(--sans);font-size:12px;letter-spacing:.22em;color:var(--soft-ink);transition:color .2s,border-color .2s}
.session-more a:hover{color:var(--gold);border-color:var(--gold)}
.session-more span{color:var(--gold);letter-spacing:0}
.icp-link{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:flex-end}
.footer-xhs{color:var(--gold)}
@media (max-width:640px){.session-more{margin-top:22px;text-align:left}.icp-link{justify-content:flex-start}}

/* 在线选配入口 */
.quote-entry{margin:28px 0 0}
.quote-entry a{display:inline-flex;align-items:center;gap:12px;padding-bottom:4px;border-bottom:1px solid var(--gold);font-family:var(--sans);font-size:13px;letter-spacing:.2em;color:var(--ink);transition:color .2s}
.quote-entry a:hover{color:var(--gold)}
.quote-entry span{color:var(--gold);letter-spacing:0}

/* ---------- 平板 / 手机 ---------- */
@media (max-width:1000px){
  .hero-media img{height:auto;min-height:0}
  .nav .header-cta{display:none}
  .proof-strip{grid-template-columns:1fr 1fr;align-items:stretch;margin:0 22px}
  .proof-strip div{padding:18px 16px 18px 0;border-left:0;border-bottom:1px solid var(--line)}
  .proof-strip div:nth-child(even){padding-left:16px;border-left:1px solid var(--line)}
  .proof-link{grid-column:1 / -1;padding:16px 0}

  .mobile-cta{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:20;display:inline-flex;align-items:center;gap:12px;padding:12px 18px 12px 22px;border:1px solid rgba(215,189,127,.4);border-radius:999px;background:rgba(35,30,25,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 30px rgba(40,30,15,.2);color:#f4efe7;font-family:var(--sans);font-size:12px;letter-spacing:.28em;opacity:0;transform:translateY(12px);visibility:hidden;transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s}
  .mobile-cta span{color:var(--gold-soft);letter-spacing:0;font-size:13px}
  .mobile-cta.is-visible{opacity:1;transform:none;visibility:visible;transition:opacity .35s ease,transform .35s ease}
  .footer{padding-bottom:84px}
}
@media (max-width:640px){
  .hero{padding-top:36px;padding-bottom:40px}
  .hero-actions{display:grid;grid-template-columns:1fr 1fr}
  .btn{width:auto;letter-spacing:.1em}
  .proof-strip{margin:0 20px}
  .proof-strip strong{font-size:19px}
  .proof-strip span{font-size:12px}
  .contact-card .contact-note{font-size:13px}
}
@media (max-width:390px){.proof-strip{margin:0 16px}}