/* 键盘焦点环：原本多数元素靠浏览器默认轮廓，少数自定义规则又把 outline 关掉、
   只换个和 hover 一样的颜色，提示强弱不一。统一为品牌金描边。
   用 :focus-visible 而非 :focus，鼠标点击不会出现。 */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* 思源宋体 CN 里的弯引号是全角字形：U+2019 的字宽等于一个汉字
   （实测 100px 字号下宽 100px，与「中」相同），中文排版里正确，
   但用在英文里会在撇号后拉出一个字宽的空洞。
   这里只把四个弯引号交给系统 Latin 衬线体，其余字形不受影响。 */
@font-face {
  font-family: "LADIAQUA Latin Quotes";
  src: local("Georgia"), local("Iowan Old Style"), local("Times New Roman"), local("Times");
  unicode-range: U+2018, U+2019, U+201C, U+201D;
}

/* 思源宋体 Source Han Serif CN — 按全站实际用字裁剪的子集。
   改文案后若出现新字，必须重新生成子集，否则缺字会回退到系统宋体、
   笔画粗细与字形都对不上（曾出现「水/铠/纪」变粗的问题）。 */
@font-face {
  font-family: "LADIAQUA Source Han Serif";
  src: url("./assets/fonts/source-han-serif-sc-subset.woff2?v=20261017k") format("woff2"),
       url("./assets/fonts/source-han-serif-sc-subset.woff?v=20261017k") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 真粗体字重，避免浏览器对 <strong> 合成假粗体 */
@font-face {
  font-family: "LADIAQUA Source Han Serif";
  src: url("./assets/fonts/source-han-serif-sc-semibold-subset.woff2?v=20261017k") format("woff2"),
       url("./assets/fonts/source-han-serif-sc-semibold-subset.woff?v=20261017k") format("woff");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #f4f1ea;
  --muted: rgba(244, 241, 234, 0.72);
  --soft: #3d3b37;
  --paper: #ffffff;
  --ivory: #ffffff;
  --line: rgba(244, 241, 234, 0.16);
  --gold: #bf9d5b;
  /* 品牌金在浅一档的底色 --soft(#3d3b37) 上只有 4.36:1，不到 AA。
     序号、标签这类小字用提亮版（4.98:1）。 */
  --gold-on-soft: #c9a968;
  --deep: #2d2924;
  --plum: #4f3846;
  --charcoal: #323232;
  --emerald: #27462e;
  --paper-grey: #e6e6e6;
  --charcoal-ink: #f4f1ea;
  --shadow: 0 30px 90px rgba(22, 19, 15, 0.12);
  --brand-serif: "LADIAQUA Source Han Serif", "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", "STSong", serif;

  /* ── 间距阶梯 ──────────────────────────────────
     全站区块内距原本散落 84/72/66/64/62/52/50/48/43/26 共十种，
     且上下常不对称（content-section 上 66 下 72）。统一为下面三档。
     改间距请改这里，不要在组件里写死。 */
  --space-section: clamp(56px, 6.5vw, 84px);        /* 区块标准上下内距 */
  --space-section-tight: clamp(34px, 4vw, 52px);    /* 紧接上一区块时 */
  --space-section-snug: clamp(18px, 2vw, 26px);     /* 页头的直接延续 */
  --space-gutter: clamp(22px, 6vw, 86px);           /* 区块左右内距 */

  /* ── 字号阶梯 ──────────────────────────────────
     全站小字号原本散落 0.68 / 0.74 / 0.78 / 0.8 / 0.86 / 0.92 / 0.95rem 共七种，
     统一收敛为下面四档。改字号请改这里，不要在组件里写死。 */
  --fs-fine: 0.7rem;     /* 落款条等不需醒目的法律信息 */
  --fs-label: 0.78rem;   /* 栏目标签 eyebrow、字段名 dt、"关注我们" */
  --fs-meta: 0.82rem;    /* 日期、面包屑、落款条等辅助信息 */
  --fs-ui: 0.9rem;       /* 导航、按钮、链接等可操作元素 */
  --fs-body: 1rem;       /* 正文 */
}

/* 英文站的弯引号改用 Latin 衬线体，避免全角字宽（见 @font-face 注释）。
   注意：这里只覆盖 --brand-serif 一个变量，其余令牌必须留在 :root 里——
   曾误把间距与字号令牌一并关进本选择器，导致中文页面上全部失效。 */
html[lang="en"] {
  --brand-serif: "LADIAQUA Latin Quotes", "LADIAQUA Source Han Serif", "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", "STSong", serif;
}


* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--charcoal);
  color: var(--ink);
  font-family: var(--brand-serif);
  letter-spacing: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(14px, 2.5vw, 28px);
  align-items: center;
  padding: 18px clamp(20px, 5vw, 64px);
  background: rgba(50, 50, 50, 0.9);
  border-bottom: 1px solid rgba(22, 19, 15, 0.08);
  box-shadow: 0 12px 38px rgba(22, 19, 15, 0.035);
  backdrop-filter: blur(22px);
}

.brand {
  display: inline-flex;
  align-items: center;
  width: clamp(150px, 13.5vw, 200px);
  line-height: 0;
}

.brand-mark {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 34px);
  justify-content: flex-end;
  min-width: 0;
  color: var(--muted);
  font-size: var(--fs-ui);
  white-space: nowrap;
}

.nav a {
  transition: color 220ms ease;
}

.nav a:hover {
  color: var(--ink);
}

/* 预约不做按钮：导航的职责是指路，胶囊按钮是电商/SaaS 的习惯。
   在一条全灰的 4 项导航里，金色本身就是足够的强调，不需要再加描边。
   注意不要写死 font-size —— 之前写死 var(--fs-ui) 导致它不跟随
   手机端的 0.76rem 缩放，比邻居高 1.9 倍、宽 2.6 倍，把导航行撑到 45px。 */
.nav a.nav-cta {
  color: inherit;
  letter-spacing: 0.02em;
  transition: color 220ms ease;
}

.nav a.nav-cta:hover {
  color: var(--ink);
}

/* EN 是辅助功能，不做按钮：纯文字，与导航文字同级，
   让「预约」成为唯一被圈起来的主行动点。 */
.language-toggle {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: var(--fs-meta);
  letter-spacing: 0.1em;
  opacity: 0.75;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 200ms ease, color 200ms ease;
}

.language-toggle:hover,
.language-toggle:focus-visible {
  opacity: 1;
  color: var(--gold);
  outline: none;
}

.hero,
.section {
  min-height: auto;
  padding: var(--space-section) var(--space-gutter);
  scroll-margin-top: 118px;
}

.hero {
  min-height: 100svh;
  padding-top: clamp(150px, 13vw, 190px);
}

.philosophy-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.68fr);
  gap: clamp(36px, 5.6vw, 82px);
  align-items: center;
}

.eyebrow {
  margin: 0 0 26px;
  color: var(--gold);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2 {
  font-weight: 400;
  line-height: 1.18;
}

h1 {
  max-width: 860px;
  margin-bottom: 42px;
  font-size: clamp(2.6rem, 6.4vw, 6.8rem);
}

@media (min-width: 1025px) {
  html[lang="en"] .philosophy-hero h1 {
    font-size: clamp(3.4rem, 4.5vw, 5rem);
    line-height: 1.16;
  }
}

/* h2 须明显小于 h1（子页 h1 为 clamp(2.2rem,4.6vw,3.9rem)），
   原 4vw 在 1440px 下达 57.6px，与 h1 的 62.4px 几乎无差别。 */
h2 {
  max-width: 760px;
  margin-bottom: 28px;
  font-size: clamp(1.8rem, 3vw, 2.9rem);
}

.phrase-nowrap {
  white-space: nowrap;
}

h3 {
  margin-bottom: 16px;
  font-weight: 400;
  font-size: clamp(1.14rem, 1.55vw, 1.45rem);
}

p,
li,
address {
  color: var(--muted);
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  font-style: normal;
  line-height: 1.9;
}

strong {
  color: var(--ink);
  font-weight: 600;
}

.hero-text {
  max-width: 780px;
  text-wrap: pretty;
}

.hero-text p,
.section-copy p,
.section-heading p {
  margin-bottom: 16px;
}

.hero-text p:last-child,
.section-copy p:last-child,
.section-heading p:last-child {
  margin-bottom: 0;
}

.hero-visual {
  min-height: 68svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
}

.section-image {
  display: block;
  width: 100%;
  min-height: 520px;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.98) saturate(0.96) contrast(1.03);
  box-shadow: var(--shadow);
}

.hero-image {
  min-height: 62svh;
  object-position: center 46%;
}

.portrait-frame {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(247, 244, 239, 0.95), rgba(255, 253, 249, 0.45)),
    radial-gradient(circle at 30% 20%, rgba(183, 150, 88, 0.12), transparent 34%),
    linear-gradient(180deg, #eee7dd, #ffffff);
  box-shadow: var(--shadow);
}

.fabric-plane,
.measure-line {
  position: absolute;
}

.fabric-plane {
  inset: 12% 22% 14% 18%;
  border: 1px solid rgba(183, 150, 88, 0.28);
  background:
    linear-gradient(135deg, transparent 0 48%, rgba(25, 24, 23, 0.06) 48% 52%, transparent 52%),
    rgba(255, 253, 249, 0.42);
}

.plane-two {
  inset: 24% 13% 8% 42%;
  background:
    linear-gradient(90deg, rgba(154, 167, 154, 0.16), transparent),
    rgba(255, 253, 249, 0.32);
}

.measure-line {
  top: 18%;
  bottom: 16%;
  left: 56%;
  width: 1px;
  background: rgba(25, 24, 23, 0.18);
  transform: rotate(8deg);
}

.visual-note {
  align-self: flex-end;
  width: max-content;
  max-width: none;
  color: var(--ink);
  font-size: 1.05rem;
  white-space: nowrap;
}

.hero-video-frame {
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.hero-video-frame .hero-image {
  box-shadow: none;
}

.hero-video-frame .season-tag {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 2;
  margin: 0;
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(20, 20, 20, 0.45);
  backdrop-filter: blur(6px);
  color: #f4f1ea;
  font-size: var(--fs-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* 首屏 — 概念B：深灰底 + 大幅竖版视觉分栏（已确认，此前遗漏未落地） */
.philosophy-hero {
  background: var(--charcoal);
  color: #f7f5f1;
}

.philosophy-hero h1 {
  color: var(--charcoal-ink);
}

.philosophy-hero .hero-text p {
  color: rgba(244, 241, 234, 0.74);
}

.philosophy-hero strong {
  color: var(--charcoal-ink);
}

.philosophy-hero .visual-note {
  color: var(--charcoal-ink);
}

/* Higher-specificity overrides (repeated class) so these win regardless of
   source order against the shared .page-breadcrumb / .fw-preview-note /
   .text-link rules defined later in this file for the light-background pages. */
.philosophy-hero.philosophy-hero .fw-preview-note {
  border-top-color: rgba(244, 241, 234, 0.18);
}

.philosophy-hero.philosophy-hero .fw-preview-note p {
  color: rgba(244, 241, 234, 0.74);
}

.philosophy-hero.philosophy-hero .page-breadcrumb span {
  color: rgba(244, 241, 234, 0.4);
}

.philosophy-hero.philosophy-hero .page-breadcrumb a {
  color: var(--gold);
}

.philosophy-hero.philosophy-hero .page-breadcrumb a:hover {
  color: var(--charcoal-ink);
}

.philosophy-hero.philosophy-hero .page-breadcrumb .breadcrumb-current {
  color: var(--charcoal-ink);
}

.philosophy-hero.philosophy-hero .text-link {
  border-color: rgba(244, 241, 234, 0.28);
  color: var(--charcoal-ink);
  background: rgba(244, 241, 234, 0.06);
}

.philosophy-hero.philosophy-hero .text-link:hover {
  border-color: var(--gold);
  background: rgba(244, 241, 234, 0.12);
}

.philosophy-hero .hero-video-frame {
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.4);
}

.visual-note.teaser-copy {
  align-self: flex-end;
  max-width: 420px;
  white-space: normal;
  text-align: right;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.8;
}

.split-section,
.founder-section,
.closing-section {
  display: grid;
  grid-template-columns: minmax(280px, 0.76fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  background: var(--soft);
}

.split-section {
  grid-template-columns: minmax(360px, 1.05fr) minmax(0, 0.88fr);
}

.founder-section {
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.74fr);
  /* 人像要正好落在色块下沿：本区下内距归零，由图片自己定义下边界；
     两列底部对齐，文字列单独补回下内距。
     （不能用负外边距把图片拽下去——人像列是最高的，它决定行高，
     负边距只会让图片穿出色块。） */
  align-items: end;
  padding-bottom: 0;
  background: var(--soft);
  border-top: 1px solid var(--line);
}

.founder-section > .section-copy {
  padding-bottom: var(--space-section);
}

/* 设计页把创始人放到了首位，紧跟页头时不需要再画分隔线 */
.cinema-page-hero + .founder-section {
  border-top: 0;
}

/* ---------- 首页页脚：门店照片 · 联系信息 · 二维码 ---------- */
.home-contact {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(190px, 0.55fr);
  gap: clamp(32px, 4.5vw, 64px);
  align-items: start;
}

.home-contact-studio img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.home-contact-info .eyebrow {
  color: var(--gold);
}

.home-contact-info h2 {
  margin: 14px 0 16px;
  color: #f7f5f1;
  font-weight: 400;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  line-height: 1.26;
}

.home-contact-info p.tagline {
  margin: 0 0 34px;
  color: rgba(247, 245, 241, 0.66);
  font-size: 1rem;
}

.home-contact-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 32px;
  margin: 0 0 30px;
  padding: 0;
}

.home-contact-fields dt {
  font-family: var(--brand-serif);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  color: var(--gold);
  margin-bottom: 8px;
}

.home-contact-fields dd {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: #f7f5f1;
}

.home-contact-fields a {
  color: #f7f5f1;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}

.home-contact-fields a:hover {
  border-bottom-color: var(--gold);
}

/* 移到联系区最下方，作为整块之后的单独一行，不再挤在中间列末尾 */
.home-contact-more {
  max-width: 1180px;
  margin: clamp(28px, 3.4vw, 44px) auto 0;
}

/* 二维码：按原图纵横比等比缩放，绝不拉伸 */
.qr-frame {
  background: #f7f5f1;
  padding: 12px;
  width: fit-content;
}

.qr-frame img {
  display: block;
  width: 160px;
  height: auto;
}

.qr-caption {
  margin: 12px 0 20px;
  font-size: var(--fs-meta);
  color: rgba(247, 245, 241, 0.6);
}

/* ---------- 通栏落款条：拉满整页宽度，一行放下 ---------- */
/* 独立使用时（首页以外的页面）自带深灰底与左右留白 */
.site-footer-bar-wrap {
  background: var(--charcoal);
  padding: 0 clamp(22px, 4vw, 56px);
}

.site-footer-bar-wrap .site-foot-bar {
  margin: 0 calc(-1 * clamp(22px, 4vw, 56px));
}

.site-foot-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: clamp(56px, 7vw, 92px) calc(-1 * clamp(22px, 4vw, 56px)) calc(-1 * clamp(40px, 6vw, 64px));
  padding: 24px clamp(22px, 4vw, 56px);
  border-top: 1px solid rgba(247, 245, 241, 0.14);
  font-family: var(--brand-serif);
  /* 落款是法律信息，不需要抢注意力：比正文辅助信息再小一档 */
  font-size: var(--fs-fine);
  letter-spacing: 0.02em;
  color: rgba(247, 245, 241, 0.55);
}

/* 落款条内所有文字统一字号与字重，不做任何差异化 */
.site-foot-bar,
.site-foot-bar span,
.site-foot-bar a {
  font-size: var(--fs-fine);
  font-weight: 400;
  line-height: 1.6;
}

.site-foot-bar .foot-legal {
  flex: 1 1 auto;
}

.site-foot-bar .foot-link {
  color: rgba(247, 245, 241, 0.62);
}

.site-foot-bar .foot-link:hover {
  color: var(--gold);
}

@media (max-width: 1024px) {
  .home-contact {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.5fr);
  }

  .home-contact-studio {
    grid-column: 1 / -1;
  }

  .home-contact-studio img {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 720px) {
  .home-contact {
    grid-template-columns: 1fr;
  }

  .home-contact-fields {
    grid-template-columns: 1fr;
  }

  .site-foot-bar {
    justify-content: flex-start;
  }

  .site-foot-bar .foot-legal {
    flex: 1 1 100%;
  }
}

/* 媒体报道页 — 来源署名 logo */
.press-source {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.press-source-logo {
  height: 20px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  opacity: 0.9;
}

/* 预约页 — 客户实穿信任背书 */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin-bottom: clamp(24px, 3vw, 36px);
}

.testimonial-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--soft);
}

@media (max-width: 760px) {
  .testimonial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .testimonial-grid img:last-child {
    display: none;
  }
}

/* 页内目录 — 让长页面一眼看出分几章 */
.page-toc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: clamp(28px, 3.4vw, 40px);
  padding-top: clamp(20px, 2.4vw, 26px);
  border-top: 1px solid rgba(244, 241, 234, 0.18);
  font-size: 0.92rem;
}

.page-toc a {
  color: var(--gold);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 200ms ease, color 200ms ease;
}

.page-toc a:hover,
.page-toc a:focus-visible {
  border-bottom-color: var(--gold);
}

.page-toc span {
  color: rgba(244, 241, 234, 0.32);
}

.section-media {
  min-height: 62svh;
}

/* 源图是 1067×1600 的竖图，原来的 1200/820 横向比例把人物裁掉大半。
   改为竖向比例并加大尺寸，裁切量显著减少。 */
.understanding-image {
  min-height: clamp(440px, 45vw, 720px);
  aspect-ratio: 9 / 10;
}

.process-image {
  min-height: 100%;
  background:
    linear-gradient(140deg, rgba(255, 253, 249, 0.15), rgba(25, 24, 23, 0.04)),
    linear-gradient(90deg, rgba(25, 24, 23, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(25, 24, 23, 0.06) 1px, transparent 1px),
    #e9e3d8;
  background-size: auto, 38px 38px, 38px 38px, auto;
  box-shadow: var(--shadow);
}

.image-consultation {
  min-height: 640px;
  clip-path: inset(0 0 0 0);
}

.image-fitting {
  min-height: 520px;
  background-color: #eee9e1;
}

.image-fabric {
  min-height: 360px;
  margin-top: 28px;
  background-color: #dfe3dc;
}

/* 透明底人像必须正好落在色块下沿：原本容器写死高度、图片再取 108%
   并 overflow:hidden，等于把人从小腿处切断；加上 section 的下内距，
   人像还悬在半空。改为图片自身决定高度，并用负外边距抵消下内距。 */
.founder-portrait {
  position: relative;
  display: grid;
  place-items: end center;
  min-height: 0;
  height: auto;
  align-self: end;
  background: transparent;
  box-shadow: none;
}

/* 人像素材本身是半身裁切（最底边人物仍占 50% 宽度），贴边后那道断口
   正好落在色块边界上，读起来像被截断。加一条基线，把意外的裁切
   变成有意的落脚点——线宽与图片同宽（人像列宽即图片宽）。 */
.founder-portrait::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--line);
}

.founder-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  transform: none;
  filter: drop-shadow(0 30px 70px rgba(25, 24, 23, 0.12));
}

.portrait-placeholder {
  display: grid;
  place-items: end start;
  min-height: 620px;
  padding: 38px;
  background:
    linear-gradient(180deg, rgba(255, 253, 249, 0), rgba(255, 253, 249, 0.72)),
    radial-gradient(circle at 42% 18%, rgba(183, 150, 88, 0.13), transparent 34%),
    linear-gradient(135deg, #f0ebe3, #faf8f3);
  box-shadow: var(--shadow);
}

.portrait-placeholder span {
  color: rgba(25, 24, 23, 0.48);
  font-size: 0.92rem;
  letter-spacing: 0.12em;
}

/* Collections index — reverse-chronological collection covers. */
.collections-list {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 48px);
}

.collection-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  align-items: stretch;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--line);
  background: var(--soft);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 260ms ease, transform 260ms ease, border-color 260ms ease;
}

.collection-card:hover {
  box-shadow: var(--shadow);
  border-color: rgba(183, 146, 82, 0.4);
  transform: translateY(-2px);
}

/* 非链接卡片（如尚未发布的当季系列）：不做任何可点击的暗示 */
.collection-card.is-static,
.collection-card.is-static:hover {
  box-shadow: none;
  border-color: var(--line);
  transform: none;
  cursor: default;
}

/* 状态标签移出图片、随正文排布时的样式 */
.collection-status.is-inline {
  position: static;
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  background: transparent;
  backdrop-filter: none;
  padding: 0;
  color: var(--gold);
  letter-spacing: 0.14em;
}

.collection-card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--charcoal);
}

.collection-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

.collection-card:hover .collection-card-media img {
  transform: scale(1.03);
}

.collection-status {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 2;
  padding: 7px 14px;
  border-radius: 20px;
  background: rgba(20, 20, 20, 0.55);
  backdrop-filter: blur(6px);
  color: #f4f1ea;
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.collection-card-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}

.collection-card-copy .eyebrow {
  margin-bottom: 0;
}

.collection-card-copy h2 {
  font-size: clamp(1.9rem, 3vw, 3.1rem);
  max-width: 520px;
}

.collection-card-copy p {
  max-width: 460px;
  color: var(--muted);
  font-size: clamp(1rem, 1.15vw, 1.08rem);
  line-height: 1.85;
}

.collection-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  color: var(--ink);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}

.collection-card-cta::after {
  content: "→";
  transition: transform 220ms ease;
}

.collection-card:hover .collection-card-cta::after {
  transform: translateX(4px);
}

.collection-card.is-archive {
  grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1fr);
}

.collection-card.is-archive .collection-card-media {
  aspect-ratio: 4 / 5;
  filter: brightness(0.98) contrast(1.02);
}

@media (max-width: 860px) {
  .collection-card,
  .collection-card.is-archive {
    grid-template-columns: 1fr;
  }

  .collection-card-media {
    aspect-ratio: 3 / 2;
  }
}

/* Homepage — season teaser (collections entry point). */
.season-teaser-heading {
  max-width: 720px;
  margin-bottom: clamp(32px, 4.5vw, 52px);
}

.season-teaser-heading h2 {
  font-size: clamp(2rem, 3.4vw, 3.4rem);
}

.season-teaser-heading p {
  max-width: 560px;
  color: var(--muted);
  font-size: clamp(1rem, 1.15vw, 1.08rem);
  line-height: 1.85;
}

.season-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 30px);
  margin-bottom: clamp(30px, 4vw, 48px);
}

.season-preview-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--soft);
}

.season-preview-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
}

.season-preview-card span {
  position: absolute;
  left: 14px;
  top: 14px;
  color: #f4f1ea;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.season-teaser-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
}

.season-teaser-actions .collection-status {
  position: static;
  backdrop-filter: none;
  background: var(--soft);
  color: var(--ink);
}

@media (max-width: 720px) {
  .season-preview-grid {
    grid-template-columns: 1fr 1fr;
  }

  .season-preview-grid > :last-child {
    grid-column: 1 / -1;
  }
}

/* Homepage — atelier teaser. */
.atelier-teaser .section-media img {
  filter: grayscale(0.08);
}

/* FW26-27 preview page — black-and-white treatment ahead of the official
   Beijing Fashion Week reveal. Scoped to this page only; the homepage hero
   video keeps its approved full-colour cut. */
.fw-preview-hero .hero-video-frame video,
.fw-preview-hero .hero-video-frame img {
  filter: brightness(0.98) contrast(1.03);
}

.fw-preview-hero .page-breadcrumb {
  margin-bottom: 22px;
}

.fw-preview-note {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.fw-preview-note p {
  max-width: 520px;
  color: var(--muted);
}

.fw-preview-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin-top: 8px;
}

.section-copy {
  max-width: 760px;
}

.question-list {
  margin-top: 38px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.question-list ul {
  display: grid;
  gap: 14px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.question-list li {
  position: relative;
  padding-left: 24px;
}

.question-list li::before {
  content: "";
  position: absolute;
  top: 0.95em;
  left: 0;
  width: 8px;
  height: 1px;
  background: var(--gold);
}

.works-section {
  background: var(--charcoal);
  padding-top: var(--space-section);
  scroll-margin-top: 116px;
}

.style-section {
  background: var(--charcoal);
}

.style-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.62fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.style-copy {
  min-width: 0;
}

.style-visual {
  position: sticky;
  top: 132px;
  overflow: hidden;
  background: var(--soft);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.style-visual .section-image {
  height: clamp(620px, 70vw, 920px);
  min-height: 0;
  object-fit: cover;
  object-position: center;
  box-shadow: none;
}

.section-heading {
  max-width: 850px;
  margin-bottom: clamp(34px, 5vw, 58px);
}

.style-grid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}

.style-card {
  min-height: 240px;
  padding: clamp(28px, 4vw, 46px);
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.style-card span {
  display: block;
  margin-bottom: 52px;
  color: var(--gold-on-soft);
  font-family: var(--brand-serif);
  font-size: 1.3rem;
}

.style-card p {
  font-size: 1rem;
}

/* Brand spirit band — 深灰为主，金色为光 */
.spirit-band {
  background: var(--charcoal);
  color: var(--charcoal-ink);
  text-align: center;
}

.spirit-band .eyebrow {
  text-align: center;
}

.spirit-band .spirit-heading {
  max-width: 920px;
  margin: 0 auto 18px;
  color: var(--charcoal-ink);
  text-align: center;
}

.spirit-tagline {
  max-width: 640px;
  margin: 0 auto;
  color: rgba(244, 241, 234, 0.72);
  text-align: center;
}

.spirit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 24px);
  max-width: 1080px;
  margin: clamp(44px, 5.5vw, 68px) auto 0;
}

.spirit-card {
  padding: clamp(26px, 3vw, 36px);
  border: 1px solid rgba(244, 241, 234, 0.16);
  text-align: left;
}

.spirit-card h3 {
  margin-bottom: 12px;
  color: var(--gold);
}

.spirit-card p {
  margin: 0;
  color: rgba(244, 241, 234, 0.74);
  font-size: 1rem;
}

/* 优雅而先锋 — duality framing above the existing style grid */
.duality-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  margin-bottom: clamp(36px, 4.6vw, 56px);
}

.duality-card {
  padding: clamp(28px, 3.4vw, 42px);
  border: 1px solid var(--line);
  background: var(--soft);
}

.duality-card.is-dark {
  border-color: var(--charcoal);
  background: var(--charcoal);
}

.duality-card h3 {
  margin-bottom: 10px;
}

.duality-card.is-dark h3 {
  color: var(--gold);
}

.duality-card.is-dark p {
  color: rgba(244, 241, 234, 0.76);
}

.duality-card p {
  margin: 0;
}

/* 品牌介绍里这句是金色点题句，下面才是分行陈述。
   必须排在 .is-dark p 之后：两者特异性相同(0,2,1)，靠顺序取胜。 */
.duality-card p.duality-tagline {
  margin-bottom: 14px;
  color: var(--gold);
  font-size: 1.02rem;
}

.duality-card p + p {
  margin-top: 10px;
}

.duality-card p.duality-tagline + p {
  margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════
   设计理念：还原品牌介绍 PPT「先锋 / 优雅」那一页的分屏版式。
   左深右浅两半通栏，照片在上、文案在下，照片底部渐隐进各自底色。
   ═══════════════════════════════════════════════════════════ */
.style-section {
  padding: 0;
}

.duality-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.duality-half {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: min(92svh, 880px);
  background: rgb(var(--half-bg));
}

/* 渐变要用各自底色的透明版，不能用 transparent ——
   transparent 等于 rgba(0,0,0,0)，在浅色半边会渐出一层灰雾。 */
.duality-half.is-dark {
  --half-bg: 50, 50, 50;
  --half-ink: #f7f5f1;
  --half-muted: rgba(244, 241, 234, 0.78);
  --half-gold: #bf9d5b;
}

.duality-half.is-light {
  --half-bg: 247, 245, 241;
  --half-ink: #2a2724;
  --half-muted: rgba(42, 39, 36, 0.78);
  /* 品牌金在象牙白上只有 2.36:1，浅色半边必须加深才过 AA */
  --half-gold: #8a6c28;
}

.duality-half-media {
  position: relative;
  /* Shared photo geometry keeps both text blocks aligned despite copy length. */
  flex: 0 0 auto;
  aspect-ratio: 1;
  min-height: 0;
  overflow: hidden;
}

.duality-half-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

/* Raise the seated portrait to align the faces in the paired images. */
.duality-half.is-light .duality-half-media img {
  object-position: center 38%;
}

.duality-half-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(var(--half-bg), 0) 42%,
    rgba(var(--half-bg), 0.7) 74%,
    rgba(var(--half-bg), 1) 100%
  );
}

.duality-half-copy {
  flex: 1;
  position: relative;
  z-index: 1;
  /* 负上边距让文案叠进渐变尾部，像 PPT 那样与照片衔接 */
  margin-top: calc(-1 * clamp(36px, 5vw, 80px));
  /* 下内距比常规区块更大：这是通栏色块，色块边缘就是硬边界，
     文字离边太近会显得被挤在角落。 */
  padding: 0 clamp(24px, 3.4vw, 58px) clamp(64px, 7vw, 108px);
  color: var(--half-muted);
}

.duality-half-copy .eyebrow {
  margin-bottom: 14px;
  color: var(--half-gold);
}

.duality-half-copy h2 {
  max-width: none;
  margin-bottom: 12px;
  color: var(--half-ink);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: 1.1;
}

.duality-half-copy .duality-tagline {
  margin-bottom: 18px;
  color: var(--half-gold);
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
}

/* 必须显式写 color：全局 p 规则是直接命中，会压过从 .duality-half-copy
   继承下来的颜色，浅色半边的正文会变成浅色、几乎融进象牙白底(1.03:1)。 */
.duality-half-copy p {
  margin: 0 0 8px;
  max-width: 34em;
  color: var(--half-muted);
  line-height: 1.95;
}

.duality-half-copy p:last-child {
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .duality-split {
    grid-template-columns: 1fr;
  }

  .duality-half {
    min-height: 0;
  }

  .duality-half-media {
    aspect-ratio: auto;
    flex: 0 0 auto;
    height: clamp(320px, 62vw, 480px);
  }
}

/* 柔软的铠甲 — product metaphor line */
.metaphor-note {
  margin-top: clamp(30px, 3.6vw, 44px);
  padding-top: clamp(22px, 3vw, 30px);
  border-top: 1px solid var(--line);
}

.metaphor-note p {
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
}

.metaphor-note p:not(:last-child) {
  margin-bottom: 12px;
}

.metaphor-note strong {
  color: var(--gold);
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 22px);
  align-items: start;
}

/* hero 里的入口链接：与季节行拉开一档，不抢标题 */
.hero-cta {
  margin-top: clamp(18px, 2.4vw, 30px);
}

/* ── 系列开篇 ──
   原本是带边框的 collection-card（左图右文），那是商品陈列的语言，
   和下面的编辑式排版打架，内容也与紧随其后的 lineup + 总理念重复。
   改为无框的标题组：系列名立在页面上，后面直接接设计图。 */
.collection-opening {
  margin-bottom: clamp(32px, 4.5vw, 64px);
}

.collection-opening h2 {
  margin: 0;
  font-size: clamp(2.6rem, 5vw, 5rem);
  line-height: 1.1;
}

.collection-opening .collection-meta {
  margin: clamp(14px, 1.8vw, 22px) 0 0;
  color: var(--gold);
  font-size: var(--fs-meta);
  letter-spacing: 0.14em;
}

/* ── 系列 lineup 设计图 ──
   21 套原始设计图使用白色背景，保留完整人物与设计细节。 */
.collection-lineup {
  margin: 0 0 clamp(30px, 4.5vw, 64px);
}

.collection-lineup img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  padding: clamp(12px, 2vw, 28px);
}

.collection-lineup figcaption {
  margin-top: 14px;
  color: var(--muted);
  font-size: var(--fs-meta);
  letter-spacing: 0.1em;
  text-align: center;
}

/* ── 篇章标题 ──
   中文章名与英文章名同级并置（折页上就是这样排的），右侧是该章的 Look 区间。 */
.chapter-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px clamp(14px, 2vw, 26px);
  margin-bottom: clamp(20px, 3vw, 38px);
  padding-bottom: clamp(14px, 2vw, 24px);
  border-bottom: 1px solid var(--line);
}

.chapter-heading h2 {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3.4rem);
  letter-spacing: 0.1em;
}

.chapter-heading .chapter-latin {
  margin: 0;
  color: var(--gold);
  font-size: var(--fs-ui);
  letter-spacing: 0.24em;
}

.chapter-heading .chapter-range {
  margin: 0 0 0 auto;
  color: var(--muted);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
}

/* 篇章理念：比正文窄一档，与下方 Look 拉开层次 */
.chapter-lede {
  max-width: 760px;
  margin: 0 0 clamp(26px, 4vw, 52px);
}

/* ── 设计师金句 ──
   折页封底那句，页面上用大字引言收束整页。 */
.collection-quote {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.collection-quote blockquote {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 2.1rem);
  line-height: 1.7;
  color: var(--ink);
}

.collection-quote cite {
  display: block;
  margin-top: clamp(16px, 2.2vw, 28px);
  color: var(--gold);
  font-size: var(--fs-label);
  font-style: normal;
  letter-spacing: 0.2em;
}

/* ── 秀场 Look 版面 ──
   与 .works-grid（样衣目录，4 等分强制裁切）刻意不同：秀场靠版面节奏，不靠裁切。
   节奏为「单幅 — 并置 — 并置」循环：单幅横跨整行、居中收窄，形成呼吸。
   图片保留 2:3 原始比例，不做 object-fit 裁切，也不加阴影与悬停缩放——
   那些是商品陈列的手法，会削弱秀场感。 */
.runway-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 40px) clamp(16px, 2.2vw, 32px);
  align-items: start;
}

.runway-look {
  margin: 0;
}

.runway-look img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--soft);
}

.runway-look figcaption {
  margin-top: 10px;
  color: var(--gold);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
}

.runway-look.is-solo {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(62%, 640px);
  margin-top: clamp(10px, 1.6vw, 26px);
  margin-bottom: clamp(10px, 1.6vw, 26px);
}

@media (max-width: 760px) {
  .runway-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .runway-look.is-solo {
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
  }
}

.works-heading {
  display: block;
  align-items: end;
  margin-bottom: clamp(28px, 4.5vw, 50px);
  border-bottom: 1px solid var(--line);
  padding-bottom: clamp(18px, 2.6vw, 30px);
}

.works-heading .eyebrow {
  margin-bottom: 0;
}

.works-heading h2 {
  max-width: none;
  margin: 0;
  text-align: left;
  white-space: nowrap;
  font-size: clamp(2.25rem, 3.45vw, 4.15rem);
}

.work-card {
  display: block;
  line-height: 0;
  overflow: hidden;
  background: var(--soft);
  box-shadow: 0 20px 54px rgba(43, 34, 24, 0.12);
}

.work-image {
  display: block;
  width: 100%;
  height: clamp(360px, 44vw, 620px);
  object-fit: cover;
  object-position: center;
  background:
    linear-gradient(180deg, rgba(255, 253, 249, 0.05), rgba(25, 24, 23, 0.1)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.35), transparent 36%),
    #d8d4ca;
  filter: brightness(0.96) saturate(0.9) contrast(1.05);
  box-shadow: none;
  transition:
    filter 600ms ease,
    transform 900ms ease;
}

.work-card:hover .work-image {
  filter: brightness(0.99) saturate(0.95) contrast(1.06);
  transform: scale(1.025);
}

.work-card:nth-child(6n + 1) .work-image,
.work-card:nth-child(6n + 4) .work-image {
  height: clamp(460px, 52vw, 760px);
}

.work-card:nth-child(6n + 2) .work-image,
.work-card:nth-child(6n + 5) .work-image {
  height: clamp(340px, 38vw, 560px);
}

.tone-blue {
  background-color: #d7e2e4;
}

.tone-ivory {
  background-color: #ece7dd;
}

.tone-floral {
  background:
    radial-gradient(circle at 44% 28%, rgba(183, 150, 88, 0.28), transparent 18%),
    radial-gradient(circle at 60% 44%, rgba(154, 167, 154, 0.36), transparent 22%),
    linear-gradient(135deg, #2f2e2c, #eee9e0);
}

.tone-sage {
  background-color: #dbe0d7;
}

.closing-section {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.95fr);
}

.closing-visual {
  display: grid;
  align-content: center;
}

.site-footer {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(72px, 9vw, 120px) clamp(22px, 6vw, 86px);
  border-top: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(22, 19, 15, 0.76), rgba(22, 19, 15, 0.38) 48%, rgba(22, 19, 15, 0.62)),
    url("./assets/site/studio/contact-studio-background.jpg") center / cover no-repeat;
  color: var(--ivory);
  overflow: hidden;
  min-height: 86svh;
  align-items: center;
  scroll-margin-top: 116px;
}

.footer-logo-block img {
  display: block;
  width: min(260px, 100%);
  height: auto;
}

.footer-logo-block {
  align-self: start;
  width: min(240px, 100%);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.contact-panel {
  display: grid;
  grid-template-columns: minmax(150px, 0.28fr) minmax(0, 1fr) minmax(180px, 0.24fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  padding: clamp(30px, 4.6vw, 54px);
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 1);
  color: var(--ink);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.2);
  scroll-margin-top: 132px;
}

.contact-copy h2 {
  max-width: none;
  color: var(--ink);
  font-size: clamp(2rem, 2.62vw, 3.28rem);
  line-height: 1.16;
  white-space: normal;
}

html[lang="zh-CN"] .contact-copy h2 {
  white-space: nowrap;
}

.contact-tagline {
  margin: 14px 0 0;
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.contact-copy dl {
  display: grid;
  gap: 0;
  margin: 30px 0 0;
}

.contact-copy dl div {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.contact-copy dt {
  color: var(--gold);
  font-size: 0.84rem;
  line-height: 1.4;
}

.contact-copy dd {
  margin: 0;
  color: var(--ink);
  font-size: clamp(0.98rem, 1.24vw, 1.22rem);
  line-height: 1.55;
}

.contact-copy dd span {
  margin: 0 10px;
  color: var(--line);
}

.qr-card {
  display: grid;
  justify-items: center;
  width: min(220px, 100%);
  max-width: 220px;
  padding: 18px;
  background: #ffffff;
  border: 1px solid var(--line);
}

.qr-card p {
  margin: 0;
  color: var(--ink);
  text-align: center;
  line-height: 1.45;
}

.qr-card img {
  width: min(184px, 100%);
  height: auto;
}

.contact-side {
  display: grid;
  gap: 22px;
  justify-items: end;
  align-self: stretch;
}

.social-footer {
  display: flex;
  justify-content: flex-end;
  align-self: end;
  gap: 24px;
  padding-top: 0;
}

.social-footer a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  opacity: 0.72;
  transition:
    opacity 200ms ease,
    transform 200ms ease;
}

.social-footer a:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.social-footer img {
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
}

.social-footer .xiaohongshu-logo {
  width: 34px;
  height: 34px;
}

.social-footer span {
  display: none;
}

.social-footer em {
  display: none;
}

.text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  gap: 10px;
  margin-top: 22px;
  padding: 10px 18px 10px 20px;
  border: 1px solid rgba(244, 241, 234, 0.24);
  color: var(--ink);
  font-size: var(--fs-ui);
  letter-spacing: 0.04em;
  background: rgba(244, 241, 234, 0.08);
  transition: border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.text-link::after {
  content: "→";
  line-height: 1;
  opacity: 0.58;
  transition: transform 220ms ease, opacity 220ms ease;
}

.text-link:hover {
  border-color: var(--gold);
  background: rgba(244, 241, 234, 0.14);
  transform: translateY(-1px);
}

.text-link:hover::after {
  transform: translateX(3px);
  opacity: 0.95;
}

.system-section,
.archive-section,
.updates-section,
.faq-section {
  background: var(--charcoal);
}

.system-section .section-heading,
.updates-section .section-heading,
.faq-section .section-heading {
  max-width: 900px;
}

.method-grid,
.archive-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(44px, 6vw, 78px);
  background: var(--line);
  border: 1px solid var(--line);
}

.method-card,
.archive-card {
  display: block;
  min-height: 280px;
  padding: clamp(28px, 3.8vw, 48px);
  background: var(--soft);
}

.method-card.is-mark {
  display: flex;
  align-items: center;
  justify-content: center;
}

.method-card.is-mark img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  opacity: 0.5;
}

.method-card span,
.archive-card span {
  display: block;
  margin-bottom: 42px;
  color: var(--gold-on-soft);
  font-family: var(--brand-serif);
  font-size: 1.16rem;
}

.method-card p,
.archive-card p {
  font-size: 1rem;
}

.work-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 clamp(34px, 4vw, 56px);
}

.work-tab {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: var(--fs-ui);
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}

.work-tab.is-active,
.work-tab:hover {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--charcoal);
}

.works-panel {
  display: none;
}

.works-panel.is-active {
  display: block;
}

.empty-showcase {
  display: grid;
  place-items: center;
  min-height: 360px;
  padding: clamp(42px, 8vw, 90px);
  border: 1px solid var(--line);
  text-align: center;
  background:
    linear-gradient(135deg, rgba(183, 146, 82, 0.04), rgba(22, 19, 15, 0.02)),
    #ffffff;
}

.empty-showcase h3 {
  font-size: clamp(1.6rem, 2.8vw, 3rem);
}

.customer-showcase-grid {
  display: grid;
  gap: clamp(46px, 6vw, 80px);
}

.customer-stack-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.6vw, 34px);
}

.customer-stack {
  border: 1px solid var(--line);
  background: var(--soft);
}

.customer-stack-summary {
  display: grid;
  grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  min-height: clamp(330px, 34vw, 460px);
  padding: clamp(24px, 3.5vw, 42px);
  cursor: pointer;
  list-style: none;
}

.customer-stack-summary::-webkit-details-marker {
  display: none;
}

.customer-stack-meta {
  display: grid;
  align-content: center;
  gap: 16px;
}

.customer-stack-meta .eyebrow {
  margin: 0;
}

.customer-stack-count {
  color: var(--muted);
  font-size: var(--fs-body);
}

.customer-stack-preview {
  position: relative;
  display: block;
  min-height: clamp(300px, 32vw, 420px);
}

.customer-stack-preview img {
  position: absolute;
  left: 0;
  top: 50%;
  width: clamp(180px, 22vw, 300px);
  height: clamp(280px, 31vw, 410px);
  object-fit: cover;
  box-shadow: 0 18px 46px rgba(22, 19, 15, 0.14);
  transform: translateY(-50%);
  transition: transform 260ms ease;
}

.customer-stack-preview img:nth-child(1) {
  z-index: 3;
  left: 0;
}

.customer-stack-preview img:nth-child(2) {
  z-index: 2;
  left: clamp(130px, 17vw, 220px);
  transform: translateY(-50%) rotate(2deg);
  opacity: 0.9;
}

.customer-stack-preview img:nth-child(3) {
  z-index: 1;
  left: clamp(260px, 34vw, 440px);
  transform: translateY(-50%) rotate(4deg);
  opacity: 0.76;
}

.customer-stack-summary:hover .customer-stack-preview img:nth-child(1) {
  transform: translateY(-52%) translateX(-4px);
}

.customer-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  padding: 0 clamp(24px, 3.5vw, 42px) clamp(24px, 3.5vw, 42px);
}

.customer-detail-grid .work-image {
  height: clamp(420px, 44vw, 720px);
}

.customer-group {
  display: grid;
  gap: 18px;
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--line);
}

.customer-group .eyebrow {
  margin-bottom: 4px;
}

.customer-image-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  align-items: start;
}

.customer-image-grid-short {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.customer-image-grid .work-image {
  height: clamp(330px, 35vw, 560px);
}

.archive-section {
  min-height: auto;
}

.archive-heading {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
  margin-bottom: clamp(30px, 5vw, 62px);
  padding-bottom: clamp(24px, 3vw, 36px);
  border-bottom: 1px solid var(--line);
}

.archive-heading h2 {
  max-width: none;
  margin: 0;
  white-space: normal;
  overflow-wrap: break-word;
  text-wrap: balance;
  font-size: clamp(2rem, 3.55vw, 4.2rem);
}

.rail-controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.rail-control {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
  font-size: 1.22rem;
  line-height: 1;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.rail-control[hidden] {
  display: none;
}

.rail-control:hover {
  border-color: rgba(22, 19, 15, 0.52);
  background: #f8f7f3;
  transform: translateY(-1px);
}

.editorial-rail {
  display: grid;
  grid-auto-columns: minmax(360px, 43%);
  grid-auto-flow: column;
  gap: clamp(18px, 2vw, 28px);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scroll-padding-inline: 1px;
  padding: 2px 1px 12px;
  scrollbar-width: none;
}

.editorial-rail::-webkit-scrollbar {
  display: none;
}

.rail-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #ffffff;
  color: inherit;
  scroll-snap-align: start;
  text-decoration: none;
  transition: transform 240ms ease, box-shadow 240ms ease;
}

.rail-card:hover,
.archive-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 70px rgba(22, 19, 15, 0.08);
}

.rail-card--press {
  min-height: clamp(330px, 29vw, 440px);
  padding: clamp(28px, 3vw, 42px);
}

.rail-card--press span {
  display: block;
  margin-bottom: clamp(54px, 7vw, 98px);
  color: var(--gold);
  font-family: var(--brand-serif);
  font-size: 1.08rem;
}

.rail-card--press h3 {
  margin: 0 0 18px;
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1.3;
}

.rail-card--press p,
.rail-card-copy > p:last-of-type {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.85;
}

.rail-card-media {
  overflow: hidden;
  background: #f5f3ed;
}

.rail-card-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 800ms ease;
}

.rail-card:hover .rail-card-media img {
  transform: scale(1.025);
}

.rail-card-media--es8 {
  background: #171717;
}

.rail-card-media--es8 img {
  object-fit: contain;
}

.rail-card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(24px, 2.7vw, 36px);
}

.rail-card-copy .eyebrow {
  margin-bottom: 20px;
}

.rail-card-copy h3 {
  margin: 0 0 16px;
  font-size: clamp(1.42rem, 2vw, 2rem);
  line-height: 1.28;
}

.section-archive-link {
  margin-top: clamp(28px, 3vw, 40px);
}

.archive-page-section {
  padding-top: var(--space-section-tight);
  background: var(--charcoal);
}

.archive-grid--press {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.updates-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
}

.update-archive-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--soft);
  color: inherit;
  text-decoration: none;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.update-archive-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 70px rgba(22, 19, 15, 0.08);
}

.update-archive-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.update-archive-card--es8 img {
  background: var(--charcoal);
  object-fit: contain;
}

.update-archive-card-copy {
  padding: clamp(22px, 2.6vw, 34px);
}

.update-archive-card-copy .eyebrow {
  margin-bottom: 18px;
}

.update-archive-card-copy h2 {
  margin: 0 0 14px;
  font-size: clamp(1.34rem, 1.9vw, 1.85rem);
  line-height: 1.32;
  /* 标题保底两行的高度，让同排卡片的正文从同一水平线起排。
     用 em 而非固定 px：字号随视口变化时这个高度跟着变，窄屏标题
     折到三行也只是把卡片撑高，不封顶、不截断。 */
  min-height: calc(2 * 1.32em);
}


.update-archive-card-copy p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1.8;
}

.updates-section {
  min-height: auto;
}

.updates-heading {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
  margin-bottom: clamp(34px, 5vw, 68px);
  padding-bottom: clamp(24px, 3vw, 36px);
  border-bottom: 1px solid var(--line);
}

.updates-heading h2 {
  max-width: none;
  margin: 0;
  white-space: nowrap;
  font-size: clamp(2rem, 3.55vw, 4.2rem);
}

.updates-heading p:last-child {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  line-height: 2;
}

.updates-layout {
  display: grid;
  gap: clamp(24px, 3vw, 42px);
}

.update-feature {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--line);
  background: #ffffff;
  overflow: hidden;
}

.update-feature-media {
  position: relative;
  background:
    linear-gradient(135deg, rgba(183, 146, 82, 0.08), rgba(22, 19, 15, 0.03)),
    #f4f1ea;
}

.update-feature-media img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

.update-feature--es8 .update-feature-media {
  background: #151515;
}

.update-feature--es8 .update-feature-media img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

.update-photo-placeholder {
  position: absolute;
  inset: clamp(24px, 3vw, 42px);
  display: grid;
  place-items: center;
  border: 1px solid rgba(22, 19, 15, 0.12);
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(22, 19, 15, 0.07) 50%, transparent 50.3%),
    linear-gradient(0deg, transparent 49.7%, rgba(22, 19, 15, 0.07) 50%, transparent 50.3%),
    rgba(255, 255, 255, 0.54);
}

.update-photo-placeholder span {
  color: rgba(22, 19, 15, 0.45);
  font-family: var(--brand-serif);
  font-size: clamp(1.4rem, 2.4vw, 3rem);
  letter-spacing: 0.08em;
}

.update-feature-copy {
  display: grid;
  align-content: start;
  padding: clamp(30px, 4vw, 56px);
}

.update-feature-copy h3 {
  max-width: 980px;
  margin-bottom: 22px;
  font-size: clamp(2rem, 3.4vw, 4.4rem);
  line-height: 1.15;
  font-weight: 400;
}

.update-feature-copy p:last-of-type {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.18vw, 1.12rem);
  line-height: 2;
}

.update-feature-link {
  justify-self: start;
  margin-top: 30px;
}

.update-lead-figure,
.update-gallery-grid figure,
.update-certificate {
  margin: 0;
}

.update-lead-figure {
  padding: 0 clamp(22px, 6vw, 86px);
}

.update-lead-figure img {
  display: block;
  width: 100%;
  max-height: 78vh;
  object-fit: cover;
}

/* 人像缩略图：横向卡片按 cover 居中裁切时，竖构图人像的头顶
   会贴到裁切边（部分人像仅余 20px）。基准上移，给头部留出空间。 */
.update-archive-card img.is-portrait {
  object-position: 50% 32%;
}

/* 秀场全身图：卡片是 4:3 横窗、图是 2:3 竖幅，cover 之后只看得到中段。
   32% 的取景正好把头切在窗口上沿之外，改到 12% 才能把脸纳进来。 */
.update-archive-card img.is-portrait-face {
  object-position: 50% 0%;
}

/* 竖构图头图（如 800×1200 人像）：不能沿用上面的
   width:100% + max-height + cover —— 等比放大后裁切窗会切掉头顶。
   改为限宽居中、保留原始比例。 */
.update-lead-figure--portrait img {
  width: auto;
  max-width: min(100%, 520px);
  max-height: 78vh;
  margin: 0 auto;
  object-fit: contain;
}

/* 灰底衬板式头图，供 logo、聘书这类需要完整显示、不能裁切的图使用。
   注意 box-sizing 是 border-box：max-height 必须显著大于上下 padding 之和，
   否则内容区会被 padding 吃光（曾出现 270px 高配 110px 上下内距、
   内容区只剩 50px、图片几乎不可见的问题）。普通实景照片不要用这个变体。 */
.update-lead-figure--contain img {
  background: var(--soft);
  object-fit: contain;
  max-height: 46vh;
  padding: clamp(28px, 3.4vw, 48px) clamp(24px, 5vw, 72px);
}

.update-article-hero {
  padding-bottom: clamp(28px, 4vw, 48px);
}

.update-article-hero .page-kicker p:last-child {
  max-width: 920px;
  color: var(--muted);
  font-size: clamp(1.08rem, 1.55vw, 1.36rem);
  line-height: 2;
}

.update-article-section {
  padding-top: clamp(28px, 4vw, 48px);
}

.update-article-body {
  max-width: 900px;
}

.update-article-body p {
  font-size: clamp(1.06rem, 1.32vw, 1.2rem);
  line-height: 2.08;
}

/* ═══════════════════════════════════════════════════════════
   纪事文章页统一版式
   此前 latest/ 与 press/ 各用一套模板：press 把正文塞进
   content-grid 的右栏（正文左边缘 485px，标题与头图却在 86px），
   latest 则并存 860/900/920 三种栏宽。现统一为——
   同一左边缘、同一栏宽，头图是唯一有意通栏的元素。
   ═══════════════════════════════════════════════════════════ */
.article-page {
  --article-measure: 720px;
  /* 图片类元素比正文宽，但与正文共用同一条居中轴线 */
  --article-wide: 1180px;
}

/* 紧接头图，不需要 .section 默认的整段上内距 */
.article-section {
  padding-top: var(--space-section-tight);
}

/* 文章页是阅读页面，不是落地页：正文栏居中，不沿用站内其他页面
   贴左边缘的排法——720px 的栏子挂在左侧会在右边留出大片空白，
   屏幕越宽越明显。栏内文字仍左对齐。 */
.article-page .page-kicker,
.article-page .article-column {
  max-width: var(--article-measure);
  margin-left: auto;
  margin-right: auto;
}

/* 头图与图集：宽于正文，但与正文同轴居中 */
.article-page .update-lead-figure img,
.article-page .update-gallery-grid {
  max-width: var(--article-wide);
  margin-left: auto;
  margin-right: auto;
}

.article-page .update-lead-figure--portrait img {
  max-width: min(100%, 520px);
}

.article-page .page-kicker h1 {
  max-width: none;
}

/* 导语：比正文略大，是页头的一部分，不是第一段正文 */
.article-page .page-kicker > p:last-child {
  max-width: none;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 1.12rem;
  line-height: 1.95;
}

.article-page .article-body,
.article-page .update-article-body {
  max-width: none;
}

.article-page .article-body p,
.article-page .update-article-body p {
  font-size: 1.06rem;
  line-height: 2.05;
  margin-bottom: 1.5em;
}

.article-page .article-body p:last-child,
.article-page .update-article-body p:last-child {
  margin-bottom: 0;
}

/* 稿件信息：原本是「报道信息」+「文章正文」两个 43px 的 h2 分段，
   读起来像公文。改为正文上方一条紧凑的定义列表。 */
.article-meta {
  margin: 0 0 clamp(38px, 4.5vw, 56px);
  padding-bottom: clamp(24px, 3vw, 34px);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 12px clamp(18px, 2.2vw, 30px);
  align-items: baseline;
}

.article-meta dt {
  margin: 0;
  color: var(--gold);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.article-meta dd {
  margin: 0;
  min-width: 0;
  color: var(--muted);
  font-size: var(--fs-meta);
  /* 原文链接是长 URL，必须允许在任意位置断行，否则会撑破栏宽 */
  overflow-wrap: anywhere;
}

.article-meta .press-source-logo {
  display: block;
  margin: 0;
}

/* 文末：返回入口。此前四篇文章读完直接断在最后一段，没有任何出口。 */
.article-foot {
  max-width: var(--article-measure);
  margin: clamp(56px, 7vw, 88px) auto 0;
  padding-top: clamp(26px, 3vw, 36px);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(20px, 3vw, 36px);
  align-items: baseline;
  justify-content: space-between;
}

.article-foot .article-foot-next {
  max-width: 46ch;
  text-align: right;
  color: var(--muted);
  font-size: var(--fs-meta);
}

.article-foot .article-foot-next a {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: var(--fs-ui);
}

@media (max-width: 700px) {
  .article-foot {
    flex-direction: column;
    align-items: stretch;
  }

  .article-foot .article-foot-next {
    text-align: left;
  }

  .article-meta {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .article-meta dt {
    margin-top: 12px;
  }
}

.update-gallery-section {
  padding-top: clamp(46px, 7vw, 86px);
}

.update-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  align-items: start;
}

.update-gallery-compact {
  margin-top: clamp(38px, 5vw, 64px);
}

.update-gallery-grid figure {
  background: var(--soft);
  overflow: hidden;
}

.update-gallery-grid img {
  display: block;
  width: 100%;
  height: clamp(420px, 42vw, 640px);
  object-fit: cover;
}

.update-gallery-grid .gallery-contain {
  grid-column: span 2;
  display: grid;
  justify-items: center;
  padding: clamp(18px, 3vw, 34px);
  background: var(--soft);
  border: 1px solid var(--line);
}

.update-gallery-grid .gallery-contain img {
  width: min(100%, 760px);
  height: auto;
  object-fit: contain;
  box-shadow: none;
}

.update-gallery-grid .gallery-wide {
  grid-column: span 2;
}

.update-gallery-grid .gallery-wide img {
  height: clamp(360px, 34vw, 520px);
}

.update-note-section {
  padding-top: clamp(34px, 6vw, 76px);
}

.update-certificate {
  max-width: 1080px;
  margin-top: clamp(34px, 5vw, 64px);
}

.update-certificate img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}

.updates-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.update-card {
  min-height: 260px;
  padding: clamp(28px, 3.8vw, 48px);
  background: #ffffff;
}

.update-card span {
  display: block;
  margin-bottom: clamp(38px, 4vw, 56px);
  color: var(--gold);
  font-family: var(--brand-serif);
  font-size: 1.16rem;
}

.update-card h3 {
  margin-bottom: 18px;
  font-size: clamp(1.24rem, 1.7vw, 1.7rem);
}

.update-card p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.9;
}

.faq-section {
  min-height: auto;
}

/* 首页：纪事与常见问题相邻，两段各自的内边距叠加会撑出过大空档 */
.cinema-journal + .faq-section {
  padding-top: var(--space-section-tight);
}

.faq-list {
  max-width: 980px;
  border-top: 1px solid var(--line);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  position: relative;
  display: block;
  padding: 28px 64px 28px 0;
  color: var(--ink);
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 1.6rem;
  line-height: 1;
}

.faq-list details[open] summary::after {
  content: "–";
}

.faq-list p,
.faq-answer {
  max-width: 760px;
  margin-bottom: 30px;
}

.faq-answer ul {
  display: grid;
  gap: 10px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}

.faq-answer li {
  position: relative;
  padding-left: 24px;
  font-size: clamp(1rem, 1.25vw, 1.1rem);
}

.faq-answer li::before {
  content: "";
  position: absolute;
  top: 0.95em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.page-main {
  padding-top: clamp(124px, 10vw, 156px);
}

.page-hero {
  min-height: auto;
  padding-top: 0;
  padding-bottom: clamp(38px, 5vw, 62px);
}

.page-kicker {
  max-width: 1040px;
}

.page-kicker h1 {
  font-size: clamp(2.8rem, 6vw, 6.5rem);
}

/* The appointment-guide titles have intentional two-line breaks. Keep each
   first line whole at desktop widths instead of allowing a second automatic
   wrap before the authored break. */
.page-kicker h1.guide-title {
  max-width: 1040px;
  font-size: clamp(2.6rem, 5.2vw, 5.6rem);
}

html[lang="en"] .page-kicker h1.guide-title {
  max-width: 1100px;
  font-size: clamp(2.45rem, 4.8vw, 5.1rem);
}

.content-section {
  min-height: auto;
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

/* 同类区块连排时不要两边各留一份内距：品牌信息、定制流程、设计体系
   等页面原本每两节之间累积 138px，收敛为一个标准间距单位。 */
.content-section + .content-section {
  padding-top: 0;
}

.page-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 28px;
  color: var(--gold);
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
}

.page-breadcrumb a {
  color: var(--gold);
  transition: color 180ms ease, transform 180ms ease;
}

.page-breadcrumb a:hover {
  color: var(--ink);
}

.page-breadcrumb a:first-child:hover {
  transform: translateX(-2px);
}

.page-breadcrumb span {
  color: rgba(244, 241, 234, 0.4);
}

.page-breadcrumb .breadcrumb-current {
  color: var(--ink);
  letter-spacing: 0.08em;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.36fr) minmax(0, 1fr);
  gap: clamp(34px, 6vw, 90px);
  border-top: 1px solid var(--line);
  padding-top: clamp(34px, 5vw, 64px);
}

.content-grid h2 {
  font-size: clamp(1.7rem, 2.6vw, 2.5rem);
}

.article-body {
  max-width: 860px;
}

.article-body p {
  font-size: clamp(1rem, 1.2vw, 1.12rem);
}

/* Appointment reading is a calm, informational page rather than an editorial
   feature. Its section headings remain legible within the content grid. */
.guide-page .content-grid {
  gap: clamp(30px, 4.5vw, 70px);
}

.guide-page .content-grid h2 {
  font-size: clamp(1.65rem, 2.1vw, 2.15rem);
  line-height: 1.28;
}

.inline-source-link {
  color: var(--gold);
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 180ms ease;
}

.inline-source-link:hover,
.inline-source-link:focus-visible {
  color: var(--ink);
  outline: none;
}

.source-link {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 46px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.source-link a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.source-section {
  padding-top: 0;
}

.source-section .source-link {
  max-width: 860px;
  margin: 0;
}

.reveal {
  opacity: 1;
  transform: none;
  transition:
    opacity 900ms ease,
    transform 900ms ease;
}

/* Hide only elements successfully enrolled in the reveal observer. */
.reveal.reveal-pending {
  opacity: 0;
  transform: translateY(34px);
}

.hero-ready {
  opacity: 1;
  transform: none;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero-ready .portrait-frame,
.hero-ready .section-image,
.section-media .process-image,
.section-media .section-image,
.style-visual .section-image,
.closing-visual .section-image,
.closing-visual .process-image {
  transform: scale(1.035);
  transition: transform 1200ms ease;
}

.hero-ready .portrait-frame,
.hero-ready .section-image,
.is-visible .portrait-frame,
.is-visible .section-image,
.is-visible .process-image {
  transform: scale(1);
}

@media (max-width: 1024px) {

  .nav {
    justify-content: flex-end;
    gap: clamp(14px, 2.4vw, 26px);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .philosophy-hero,
  .split-section,
  .founder-section,
  .closing-section {
    grid-template-columns: 1fr;
  }

  .style-layout,
  .works-heading {
    grid-template-columns: 1fr;
  }

  .spirit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .duality-grid {
    grid-template-columns: 1fr;
  }

  .method-grid,
  .archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .archive-heading,
  .updates-heading,
  .content-grid {
    grid-template-columns: 1fr;
  }

  .archive-heading .rail-controls,
  .updates-heading .rail-controls {
    justify-content: flex-start;
  }

  .archive-heading h2,
  .updates-heading h2 {
    white-space: normal;
  }

  .update-feature {
    grid-template-columns: 1fr;
  }

  .updates-card-grid {
    grid-template-columns: 1fr;
  }

  .editorial-rail {
    grid-auto-columns: minmax(320px, 58%);
  }

  .updates-archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .update-gallery-grid {
    grid-template-columns: 1fr;
  }

  .update-gallery-grid .gallery-wide {
    grid-column: auto;
  }

  .update-gallery-grid .gallery-contain {
    grid-column: auto;
  }

  .style-visual {
    position: relative;
    top: auto;
  }

  .style-visual .section-image {
    height: 720px;
  }

  .hero {
    padding-top: 178px;
  }

  .hero-visual,
  .section-media {
    min-height: auto;
  }

  .section-image,
  .hero-image {
    min-height: 460px;
  }

  .hero-image {
    height: clamp(540px, 86vw, 760px);
    object-fit: cover;
  }

  .understanding-image {
    min-height: 420px;
  }

  .portrait-frame,
  .image-consultation,
  .image-fitting {
    min-height: 520px;
  }

  .style-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .works-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-image-grid,
  .customer-image-grid-short,
  .customer-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-stack-summary {
    grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr);
    min-height: 330px;
  }

  .customer-stack-preview img {
    width: clamp(150px, 26vw, 220px);
    height: clamp(230px, 38vw, 320px);
  }

  .customer-stack-preview img:nth-child(2) {
    left: clamp(92px, 18vw, 150px);
  }

  .customer-stack-preview img:nth-child(3) {
    left: clamp(184px, 36vw, 300px);
  }

  .site-footer,
  .contact-panel {
    grid-template-columns: 1fr;
  }

  .contact-panel {
    align-items: start;
  }

  .qr-card {
    width: min(240px, 100%);
    max-width: 240px;
    justify-self: center;
  }

  .contact-side {
    grid-template-columns: 1fr;
    align-items: start;
    align-self: start;
    width: min(280px, 100%);
    justify-self: center;
    justify-content: center;
    justify-items: center;
    gap: 18px;
  }

  .social-footer {
    justify-content: center;
    flex-wrap: nowrap;
    width: min(240px, 100%);
  }

}

@media (max-width: 680px) {
  .site-header {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px 16px 9px;
  }

  .brand {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    align-items: center;
    width: clamp(132px, 36vw, 160px);
  }

  /* 不画分隔线：它把 logo 和导航切成两个独立色块，两者看起来被推远了。
     去掉后配合更小的行间距，整个 header 读作一个整体。 */
  .nav {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    justify-content: center;
    gap: clamp(10px, 3.4vw, 16px);
    overflow-x: auto;
    overflow-y: hidden;
    padding-top: 0;
    border-top: 0;
    font-size: 0.76rem;
  }

  .nav::before,
  .nav::after {
    content: none;
  }

  /* EN 已改为纯文字，不再是方框按钮，此处只压小字号 */
  .language-toggle {
    font-size: 0.72rem;
  }

  .hero,
  .section {
    min-height: auto;
    padding: 60px 20px 48px;
  }

  .hero {
    padding-top: 174px;
  }

  h1 {
    font-size: clamp(2.25rem, 11vw, 3.9rem);
  }

  .page-kicker h1.guide-title {
    font-size: clamp(2rem, 9vw, 3.1rem);
  }

  html[lang="en"] .page-kicker h1.guide-title {
    font-size: clamp(1.9rem, 7.2vw, 2.5rem);
  }

  h2 {
    font-size: clamp(1.9rem, 9vw, 3.2rem);
  }

  .portrait-frame,
  .image-consultation,
  .image-fitting,
  .image-fabric,
  .portrait-placeholder {
    min-height: 380px;
  }

  .section-image,
  .hero-image,
  .style-visual .section-image {
    min-height: 380px;
  }

  .hero-image {
    height: clamp(420px, 112vw, 560px);
  }

  .founder-portrait {
    min-height: 0;
    height: auto;
  }

  .spirit-grid {
    grid-template-columns: 1fr;
  }

  .style-grid,
  .works-grid {
    grid-template-columns: 1fr;
  }

  .customer-image-grid,
  .customer-image-grid-short,
  .customer-detail-grid {
    grid-template-columns: 1fr;
  }

  .customer-stack-summary {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 18px;
  }

  .customer-stack-preview {
    min-height: 300px;
  }

  .customer-stack-preview img {
    width: min(44vw, 170px);
    height: 260px;
  }

  .customer-stack-preview img:nth-child(2) {
    left: min(28vw, 108px);
  }

  .customer-stack-preview img:nth-child(3) {
    left: min(56vw, 216px);
  }

  .customer-detail-grid .work-image {
    height: clamp(440px, 128vw, 560px);
  }

  .method-grid,
  .archive-grid,
  .updates-archive-grid {
    grid-template-columns: 1fr;
  }

  .method-card,
  .archive-card {
    min-height: 0;
  }

  .updates-heading {
    gap: 8px;
    margin-bottom: 28px;
  }

  .editorial-rail {
    grid-auto-columns: minmax(278px, 86%);
    gap: 16px;
  }

  .rail-card--press {
    min-height: 310px;
  }

.rail-card--press h3 {
  margin-top: 0;
}

  .rail-control {
    width: 40px;
    height: 40px;
  }

  .updates-heading h2 {
    margin-bottom: 14px;
  }

  .update-feature {
    min-height: 0;
  }

  .update-photo-placeholder {
    inset: 20px;
  }

  .update-feature-copy {
    padding: 30px 24px 34px;
  }

  .update-feature-copy h3 {
    margin-bottom: 18px;
  }

  .update-card {
    min-height: 0;
    padding: 28px 24px 32px;
  }

  .update-card span {
    margin-bottom: 26px;
  }

  .update-lead-figure {
    padding: 0 20px;
  }

  .page-breadcrumb {
    margin-bottom: 22px;
  }

  .update-lead-figure img {
    max-height: none;
    aspect-ratio: 4 / 3;
  }

  .update-lead-figure--portrait img {
    aspect-ratio: auto;
    max-width: 100%;
  }

  .update-gallery-grid img,
  .update-gallery-grid .gallery-wide img {
    height: auto;
    max-height: none;
  }

  .update-gallery-grid .gallery-contain {
    padding: 14px;
  }

  .update-gallery-grid .gallery-contain img {
    width: 100%;
  }

  .update-certificate {
    margin-top: 28px;
  }

  .style-visual .section-image {
    height: auto;
    min-height: 0;
    aspect-ratio: 3 / 4;
  }

  .works-heading {
    gap: 18px;
  }

  .works-heading h2 {
    white-space: normal;
    font-size: clamp(2rem, 9vw, 3.2rem);
  }

  .work-image {
    height: clamp(440px, 128vw, 520px);
  }

  .work-card:nth-child(n) .work-image {
    height: clamp(440px, 128vw, 520px);
  }

  .contact-copy dl div {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 15px 0;
  }

  .contact-copy h2 {
    font-size: clamp(1.42rem, 6vw, 2.1rem);
    white-space: normal;
  }

  html[lang="zh-CN"] .contact-copy h2 {
    white-space: normal;
  }

  .contact-side {
    grid-template-columns: 1fr;
    width: min(280px, 100%);
    justify-items: center;
    gap: 18px;
  }

  .qr-card {
    width: min(280px, 100%);
    max-width: 280px;
    padding: 20px;
  }

  .qr-card img {
    width: min(232px, 100%);
  }

  .contact-copy dd span {
    display: none;
  }

  .contact-copy dd a {
    display: block;
  }

  .social-footer {
    justify-content: center;
    gap: 34px;
    width: min(280px, 100%);
    padding-top: 2px;
  }

  .social-footer a {
    min-width: 0;
    width: 44px;
    height: 44px;
    opacity: 0.78;
  }

  .social-footer img {
    width: 32px;
    height: 32px;
  }

  .social-footer .xiaohongshu-logo {
    width: 42px;
    height: 42px;
  }

  .archive-heading {
    gap: 8px;
  }

  .archive-heading h2,
  .updates-heading h2 {
    white-space: normal;
    font-size: clamp(1.9rem, 9vw, 3.2rem);
  }

  .source-link {
    display: grid;
    gap: 10px;
  }
}

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

  .reveal,
  .reveal.reveal-pending,
  .hero-visual .portrait-frame,
  .section-media .process-image,
  .closing-visual .process-image {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ======================================================================
   首页重设计 v2 — 阿玛尼高定方向：黑白灰基调 + 全屏摄影 + 克制排版
   仅作用于首页专属的 cinema-* 组件，不影响其余页面既有样式。
   ====================================================================== */


.site-header.header-cinematic {
  background: linear-gradient(180deg, rgba(50, 50, 50, 0.68), rgba(50, 50, 50, 0));
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transition: background 260ms ease, backdrop-filter 260ms ease, border-color 260ms ease;
}



/* 首页 hero 视频在导航行位置实测平均亮度 147、最亮帧 189，
   导航大部分时间压在亮画面上——0.8 不透明度的白在这里只有 3 点几比一。
   改为不透明纯白后即便遮罩较弱也有 5.5:1 以上。 */
.site-header.header-cinematic .nav {
  color: #f7f5f1;
}

.site-header.header-cinematic .nav a:hover {
  color: #ffffff;
}

.site-header.header-cinematic .nav a.nav-cta {
  color: inherit;
}

.site-header.header-cinematic .nav a.nav-cta:hover {
  color: #ffffff;
}

.site-header.header-cinematic .language-toggle {
  color: rgba(247, 245, 241, 0.85);
}

.site-header.header-cinematic .language-toggle:hover {
  color: var(--gold);
}

/* 只换底色与描边，绝不改 padding — 改了会让 logo 在滚动时上下跳位 */
.site-header.header-cinematic.is-solid {
  background: rgba(50, 50, 50, 0.88);
  backdrop-filter: blur(18px);
  border-bottom-color: rgba(247, 245, 241, 0.1);
}

/* ---------- cinematic hero ---------- */
.cinema-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 0;
}

.cinema-hero-still,
.cinema-hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.cinema-hero video {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.cinema-hero-still {
  object-position: center 8%;
}

.cinema-hero.video-playing video {
  opacity: 1;
}

.cinema-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(50, 50, 50, 0.05) 0%, rgba(50, 50, 50, 0.12) 42%, rgba(50, 50, 50, 0.88) 100%);
}

.cinema-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 clamp(22px, 4vw, 56px) clamp(56px, 8vw, 110px);
  color: #f7f5f1;
}

.cinema-hero-content .eyebrow {
  margin-bottom: 20px;
  color: var(--gold);
}

/* 标题只放系列名（短句），品牌与季度降为上方 eyebrow。
   中文显示级标题不应依赖自动折行——短到任何视口都排得下，才不会出现
   「系列」被甩到第二行这类问题。 */
.cinema-hero-content .hero-eyebrow {
  margin: 0 0 16px;
  color: rgba(247, 245, 241, 0.72);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: none;
}

.cinema-hero-content h1 {
  margin: 0 0 22px;
  color: #f7f5f1;
  font-weight: 400;
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height: 1.16;
  letter-spacing: 0.04em;
  max-width: none;
  white-space: nowrap;
}

/* 中文可在任意字符间断行，容器宽度决定断点落在哪。
   440px 让第一行正好收在逗号处，避免把「笃定」这类词拆开。 */
.cinema-hero-content p {
  margin: 0;
  max-width: 440px;
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.85;
  color: rgba(247, 245, 241, 0.72);
  text-wrap: pretty;
}

.cinema-hero-content strong {
  color: #f7f5f1;
  font-weight: 600;
}

.cinema-hero-content .hero-season {
  margin-top: 24px;
  padding-top: 18px;
  max-width: none;
  border-top: 1px solid rgba(247, 245, 241, 0.22);
  color: var(--gold);
  font-size: var(--fs-ui);
  letter-spacing: 0.05em;
}

/* ---------- archive teaser (往届作品入口，取代原当季系列缩略图) ---------- */
.cinema-archive-teaser {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 0;
  overflow: hidden;
}

.cinema-archive-teaser img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
  filter: brightness(0.97) contrast(1.04);
}

.cinema-archive-teaser::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(50, 50, 50, 0.94) 0%, rgba(50, 50, 50, 0.72) 28%, rgba(50, 50, 50, 0.05) 60%, rgba(50, 50, 50, 0) 80%);
}

.cinema-archive-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 clamp(22px, 4vw, 56px) clamp(56px, 7vw, 96px);
  color: #f7f5f1;
}

.cinema-archive-content h2 {
  margin: 0 0 14px;
  color: #f7f5f1;
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.14;
  max-width: 640px;
}

.cinema-archive-content p {
  margin: 0 0 26px;
  max-width: 420px;
  color: rgba(247, 245, 241, 0.72);
  font-size: 1rem;
  line-height: 1.85;
}

.cinema-link {
  flex-shrink: 0;
  font-family: var(--brand-serif);
  font-size: var(--fs-ui);
  letter-spacing: 0.1em;
  color: var(--gold);
  border-bottom: 1px solid rgba(183, 146, 82, 0.4);
  padding-bottom: 6px;
  white-space: nowrap;
  transition: color 200ms ease, border-color 200ms ease;
}

.cinema-link:hover {
  color: #ffffff;
  border-color: #ffffff;
}

.cinema-link.on-light {
  color: var(--gold);
  border-bottom-color: rgba(45, 41, 36, 0.35);
}

.cinema-link.on-light:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* ---------- statement (设计引言：整幅大图，文字压图) ---------- */
/* 与视频 hero、过往作品同结构同高，三个主板块一致 */
.cinema-statement {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 0;
  overflow: hidden;
}

.cinema-statement img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: brightness(0.97) contrast(1.04);
}

.cinema-statement::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(50, 50, 50, 0.94) 0%, rgba(50, 50, 50, 0.72) 28%, rgba(50, 50, 50, 0.05) 60%, rgba(50, 50, 50, 0) 80%);
}

.cinema-statement-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 clamp(22px, 4vw, 56px) clamp(56px, 7vw, 96px);
  color: #f7f5f1;
}

.cinema-statement-content .eyebrow {
  margin-bottom: 20px;
}

.cinema-statement-content h2 {
  margin: 0 0 14px;
  color: #f7f5f1;
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.14;
  max-width: 640px;
}

/* 390px 让断行落在破折号后（语义停顿处），而不是把词拆开 */
.cinema-statement-content p {
  margin: 0 0 26px;
  max-width: 390px;
  color: rgba(247, 245, 241, 0.72);
  font-size: 1rem;
  line-height: 1.85;
  text-wrap: pretty;
}

.cinema-statement-content p.eyebrow {
  max-width: none;
}

/* ---------- journal index (纪事编辑列表，浅底) ---------- */
/* 保持块级：内部 .cinema-journal-head / -list 靠 margin:0 auto 居中对齐，
   若改成 flex 容器，auto 外边距会让它们收缩成内容宽度、与列表错位。
   不设 min-height：条目只有几条时会撑出大片空白，让内容自己决定高度。 */
.cinema-journal {
  padding: calc(var(--space-section) * 1.5) clamp(22px, 4vw, 56px) var(--space-section-tight);
}

.cinema-journal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  max-width: 1180px;
  margin: 0 auto clamp(36px, 5vw, 60px);
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.cinema-journal-head h2 {
  margin: 8px 0 0;
  font-weight: 400;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
}

.cinema-journal-list {
  display: flex;
  flex-direction: column;
  max-width: 1180px;
  margin: 0 auto;
}

/* 日期列与正文之间留出足够的呼吸，宽屏下间距随视口放大 */
.cinema-journal-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  column-gap: clamp(32px, 6vw, 96px);
  row-gap: 24px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  transition: opacity 200ms ease;
}

.cinema-journal-row:hover {
  opacity: 0.6;
}

.cinema-journal-thumb {
  width: 76px;
  height: 76px;
  overflow: hidden;
  background: var(--soft, #f2efe8);
}

.cinema-journal-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.97) contrast(1.04);
}

.cinema-journal-thumb.is-mark {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cinema-journal-thumb.is-mark img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: none;
  opacity: 0.82;
}

.cinema-journal-date {
  font-family: var(--brand-serif);
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
}

.cinema-journal-row h3 {
  margin: 0 0 6px;
  font-weight: 400;
  font-size: clamp(1.06rem, 1.5vw, 1.3rem);
  color: var(--ink);
}

.cinema-journal-row p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-ui);
  line-height: 1.7;
  max-width: 62ch;
}

.cinema-journal-arrow {
  font-family: var(--brand-serif);
  font-size: 1.1rem;
  color: var(--gold-deep, var(--gold));
  align-self: center;
}

/* ---------- contact / footer (深底) ---------- */
.cinema-contact {
  background: var(--charcoal);
  color: #f7f5f1;
  padding: calc(var(--space-section) * 1.5) clamp(22px, 4vw, 56px) var(--space-section-tight);
}

.cinema-contact-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.6fr);
  gap: clamp(40px, 6vw, 90px);
}

.cinema-contact-main .eyebrow {
  color: var(--gold);
}

.cinema-contact-main h2 {
  margin: 14px 0 18px;
  color: #f7f5f1;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  line-height: 1.24;
  max-width: 480px;
}

.cinema-contact-main p.tagline {
  margin: 0 0 44px;
  color: rgba(247, 245, 241, 0.66);
  font-size: 1.02rem;
}

.cinema-contact-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 40px;
  max-width: 560px;
  padding: 0;
  margin: 0;
}

.cinema-contact-fields dt {
  font-family: var(--brand-serif);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--greige, #cbc3b3);
  margin-bottom: 8px;
}

.cinema-contact-fields dd {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: #f7f5f1;
}

.cinema-contact-fields a {
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, color 200ms ease;
}

.cinema-contact-fields a:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.cinema-contact-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.cinema-qr-card {
  padding: 14px;
  background: #f7f5f1;
  width: fit-content;
}

/* 二维码按原图纵横比等比缩放，不得写死高度（原图为竖图，写死会压扁） */
.cinema-qr-card img {
  width: 160px;
  height: auto;
  display: block;
}

/* 英文站尚未同步改版，仍使用图标式社交入口，保留其样式 */
.cinema-social-row {
  display: flex;
  gap: 16px;
}

.cinema-social-row a {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(247, 245, 241, 0.38);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 200ms ease;
}

.cinema-social-row a:hover {
  border-color: var(--gold);
}

.cinema-social-row img {
  width: 21px;
  height: 21px;
  object-fit: contain;
  filter: invert(1);
}

/* 社交入口：纯文字链接，无边框无底色（小红书官方标识本身就是三个字的
   字标，缩到图标尺寸完全不可读）。参照 ICICLE 等品牌的页脚做法：
   一行小字、克制的灰调、下划线只在悬停时出现。 */
.social-label {
  margin: 0 0 10px;
  font-family: var(--brand-serif);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  color: var(--gold);
}

.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}

.social-row a {
  color: rgba(247, 245, 241, 0.6);
  font-size: var(--fs-ui);
  letter-spacing: 0.04em;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 200ms ease, border-color 200ms ease;
}

.social-row a:hover,
.social-row a:focus-visible {
  color: #f7f5f1;
  border-bottom-color: rgba(247, 245, 241, 0.4);
  outline: none;
}

.cinema-foot-bar {
  max-width: 1180px;
  margin: clamp(60px, 8vw, 100px) auto 0;
  padding-top: 26px;
  border-top: 1px solid rgba(247, 245, 241, 0.14);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--brand-serif);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: rgba(247, 245, 241, 0.42);
}

.cinema-foot-bar a {
  color: rgba(247, 245, 241, 0.62);
}

.cinema-foot-bar a:hover {
  color: var(--gold);
}

@media (max-width: 860px) {
  .cinema-contact-grid {
    grid-template-columns: 1fr;
  }

  .cinema-journal-row {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    row-gap: 4px;
    padding: 20px 0;
  }

  .cinema-journal-date {
    grid-column: 1;
    grid-row: 1;
  }

  .cinema-journal-body {
    grid-column: 1;
    grid-row: 2;
  }

  .cinema-journal-arrow {
    display: none;
  }
}

@media (max-width: 560px) {
  .cinema-contact-fields {
    grid-template-columns: 1fr;
  }
}

/* ---------- cinema page-hero (深底次级页头，用于系列/往届作品等页) ---------- */
.cinema-page-hero {
  background: var(--charcoal);
  color: #f7f5f1;
  padding-top: clamp(150px, 13vw, 190px);
}

.page-main > .cinema-page-hero:first-child {
  margin-top: calc(-1 * clamp(124px, 10vw, 156px));
}

.cinema-page-hero .page-breadcrumb a {
  color: var(--gold);
}

.cinema-page-hero .page-breadcrumb a:hover {
  color: #ffffff;
}

.cinema-page-hero .page-breadcrumb span {
  color: rgba(247, 245, 241, 0.56);
}

.cinema-page-hero .page-breadcrumb .breadcrumb-current {
  color: #f7f5f1;
}

.cinema-page-hero .eyebrow {
  color: var(--gold);
}

/* 二三级页标题与首页保持同一量级（首页 h1 为 clamp(2.4rem,5.4vw,4.6rem)），
   子页标题通常更长，原来的 6.4vw 会明显压过首页。 */
.cinema-page-hero h1 {
  color: #f7f5f1;
  font-size: clamp(2.2rem, 4.6vw, 3.9rem);
  line-height: 1.2;
  margin-bottom: 28px;
}

/* 作品档案：页头副标题与下方切换按钮之间原有 329px 空档，收紧 */
/* 作品档案：页头副标题与切换按钮之间原本 127px（副标题下边距 18.6
   + 页头下内距 62 + 本区上内距）。按钮是页头的直接延续，不需要整段间距。 */
.cinema-page-hero + .works-section {
  padding-top: var(--space-section-snug);
}

.works-section .work-tabs {
  margin-bottom: clamp(28px, 3.4vw, 44px);
}

.cinema-page-hero p {
  color: rgba(247, 245, 241, 0.68);
}

/* Winter Engagements: complete figures, with optional individual design illustrations. */
.collection-season-nav {display:flex;flex-wrap:wrap;gap:16px 32px;padding-bottom:24px;margin-bottom:40px;border-bottom:1px solid var(--line);font-size:var(--fs-label);}
.collection-season-nav a {color:var(--muted);text-decoration:none;}
.collection-season-nav a.is-current {color:var(--gold);}
.winter-look-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 28px;align-items:start;}
.winter-fabric {margin:16px 0 4px;color:var(--ink);}
.winter-detail {margin:0;color:var(--muted);font-size:var(--fs-label);line-height:1.7;}
.winter-sketch {margin-top:20px;border-top:1px solid var(--line);}
.winter-sketch summary {padding:14px 0;color:var(--gold);cursor:pointer;font-size:var(--fs-label);}
.winter-sketch img {display:block;width:100%;height:auto;}
.winter-methods {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;}
.winter-methods h3 {font-size:1.3rem;line-height:1.5;}
.winter-methods p {color:var(--muted);}
@media(max-width:900px) {.winter-look-grid {grid-template-columns:repeat(2,minmax(0,1fr));}.winter-methods {grid-template-columns:1fr;gap:20px;}}
@media(max-width:560px) {.winter-look-grid {grid-template-columns:1fr;gap:40px;}.collection-season-nav {gap:16px;margin-bottom:28px;}}

/* Founder and atelier method: show the complete original photographs. */
.founder-photo-section .founder-portrait {align-self:center;}
.founder-photo-section .founder-portrait::after {content:none;}
.founder-photo-section .founder-image {height:auto;min-height:0;aspect-ratio:auto;object-fit:contain;filter:none;}
.atelier-method-section .section-media {min-height:0;align-self:center;}
.atelier-method-section .understanding-image {height:auto;min-height:0;aspect-ratio:auto;object-fit:contain;}

/* Winter collection as one continuous design lineup. */
.winter-collection-lineup {margin:0;}
.winter-lineup-sheet {position:relative;background:#fff;padding-block:clamp(20px, 3.5vw, 56px);}
.winter-lineup-sheet img {display:block;width:100%;height:auto;}
.winter-collection-lineup figcaption {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px;text-align:center;color:var(--gold);font-size:var(--fs-label);}
.winter-collection-lineup small {display:block;margin-top:8px;color:var(--muted);font-size:.72rem;letter-spacing:.08em;}

/* The current navigation section, including its child pages, is gold. */
.nav a[aria-current="page"],
.site-header.header-cinematic .nav a[aria-current="page"],
.site-header.header-cinematic .nav a[aria-current="page"]:hover {color:var(--gold);}

/* Client commissions within the collections page; preserve original photographs. */
.client-preview-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:start;}
.client-preview {display:block;}
.client-preview img {display:block;width:100%;height:auto;}
@media(max-width:640px){.client-preview-grid {grid-template-columns:1fr;gap:28px;}}

/* Portrait crop keeps the face and garment balanced on narrow screens. */
@media (max-width: 600px) {
  .cinema-archive-teaser img { object-position: center top; }
}

/* Clear, separate collection choices on both season pages. */
.collection-season-nav {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding-bottom:0;border-bottom:0;max-width:760px;}
.collection-season-nav a,.collection-season-nav .is-current {display:flex;flex-direction:column;gap:8px;padding:20px 24px;border:1px solid var(--line);min-height:96px;justify-content:center;}
.collection-season-nav small {font-size:.78rem;letter-spacing:.1em;}
.collection-season-nav strong {font-weight:400;font-size:clamp(1.1rem,2vw,1.45rem);line-height:1.4;}
.collection-season-nav .is-current {color:var(--gold);border-color:var(--gold);}
.collection-season-nav a:hover {color:var(--gold);border-color:var(--gold);}
.collection-season-nav a:focus-visible {outline:2px solid var(--gold);outline-offset:4px;}
.design-philosophy-heading {padding:48px clamp(22px,4vw,56px) 28px;}
.design-philosophy-heading .eyebrow {margin:0;}
.founder-photo-section {padding-bottom:48px;}
@media(min-width:641px) {.client-preview img {aspect-ratio:4/5;height:auto;object-fit:cover;object-position:center top;}}
@media(max-width:640px) {
 .founder-photo-section {padding-bottom:56px;}
 .design-philosophy-heading {padding-top:16px;padding-bottom:24px;}
 .collection-season-nav {gap:16px;}
 .collection-season-nav a,.collection-season-nav .is-current {padding:16px 14px;}
}

.season-switch-section {padding-bottom:0;}
.season-switch-section .collection-season-nav {margin-bottom:0;}
.collection-season-nav button {display:flex;flex-direction:column;gap:8px;padding:20px 24px;min-height:96px;justify-content:center;border:1px solid var(--line);background:none;color:var(--muted);font:inherit;text-align:left;cursor:pointer;}
.collection-season-nav button[aria-selected="true"] {color:var(--gold);border-color:var(--gold);}
.collection-season-nav button:hover {color:var(--gold);}
.collection-season-nav button:focus-visible {outline:2px solid var(--gold);outline-offset:4px;}
[data-season-panel][hidden] {display:none;}
@media(max-width:640px) {.collection-season-nav button {padding:16px 14px;}}

/* Recognisable platform marks, with comfortable touch targets. */
.social-row {gap:8px 16px;align-items:center;}
.social-row a {display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;padding:0;border:0;opacity:.8;transition:opacity .2s ease,transform .2s ease;}
.social-row img {display:block;width:30px;height:30px;object-fit:contain;filter:brightness(0) invert(1);}
.social-row a:hover {opacity:1;transform:translateY(-2px);}
.social-row a:focus-visible {outline:2px solid var(--gold);outline-offset:3px;opacity:1;}

/* Smaller social marks; the touch area stays generous. */
.social-row {gap:4px 10px;}
.social-row a {width:44px;height:44px;opacity:.7;}
.social-row img {width:20px;height:20px;}
.social-row img[src*="xiaohongshu"] {width:23px;height:23px;}
.social-row img[src*="youtube"] {width:22px;height:22px;}

/* Preserve every face in the closing report's landscape group photograph. */
.update-lead-figure--full img {height:auto;aspect-ratio:auto;max-height:none;object-fit:contain;}
.update-archive-card img.is-editorial-group {aspect-ratio:4/3;height:auto;object-fit:cover;object-position:right center;background:none;}

.collection-chapter-jump {display:flex;flex-wrap:wrap;gap:14px 28px;margin:0 auto;padding:0 var(--space-gutter) 24px;max-width:1440px;font-size:var(--fs-ui);color:var(--muted);}
.collection-chapter-jump a:hover,.collection-chapter-jump a:focus-visible {color:var(--gold);}
section[id^="aqua-"],section[id^="winter-"] {scroll-margin-top:140px;}

.appointment-contact .cinema-contact-grid {max-width:1000px;grid-template-columns:minmax(0,1fr) 260px;align-items:center;}
.appointment-contact .cinema-contact-side {align-items:center;text-align:center;}
.appointment-reading {display:flex;flex-wrap:wrap;gap:14px 24px;}
@media(max-width:760px) {.appointment-contact .cinema-contact-grid {grid-template-columns:1fr;max-width:540px;}}

.appointment-contact {padding-top:var(--space-section-tight);}
.appointment-contact .cinema-contact-fields a[href^="tel:"] {white-space:nowrap;}

/* Keep every client preview within the mobile card, including rotated stacks. */
@media (max-width: 640px) {
  .customer-stack-preview {display:flex;gap:8px;align-items:flex-start;min-height:0;}
  .customer-stack-preview img:nth-child(n),
  .customer-stack-summary:hover .customer-stack-preview img:nth-child(n) {
    position:static;flex:1 1 0;min-width:0;max-width:170px;width:0;height:auto;
    aspect-ratio:2/3;object-fit:contain;transform:none;opacity:1;
  }
}

/* Native construction photographs: preserve their whole frame at readable scale. */
.structure-section {max-width:1240px;margin-inline:auto;}
.structure-heading {max-width:850px;margin-bottom:48px;}
.structure-heading h2 {font-size:clamp(1.7rem,2.8vw,2.5rem);margin:0 0 20px;}
.structure-heading p,.structure-copy {font-size:var(--fs-body);line-height:1.85;color:var(--muted);}
.structure-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;}
.structure-card {min-width:0;}
.structure-card .eyebrow {margin:0 0 12px;}
.structure-card h3 {font-size:1.35rem;margin:0 0 28px;}
.structure-photos {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start;}
.structure-photos figure {margin:0;min-width:0;}
.structure-photos img {display:block;width:100%;height:auto;}
.structure-photos figcaption {font-size:var(--fs-label);line-height:1.6;color:var(--muted);margin-top:12px;}
.structure-copy {margin:24px 0 0;}
#soft-structure {scroll-margin-top:140px;}
@media(max-width:900px){.structure-grid {grid-template-columns:1fr;gap:56px;}.structure-card {max-width:580px;margin-inline:auto;width:100%;}.structure-heading {margin-bottom:36px;}}

/* Align complete construction photographs and their captions across cards. */
.structure-photos img {aspect-ratio:2/3;object-fit:contain;}
.structure-photos figcaption {min-height:3.2em;}
@media(min-width:901px){.structure-card h3 {min-height:2.6em;}}

/* Supporting references belong to the prose, with no button or arrow. */
.inline-reference {display:inline;color:var(--gold);text-decoration:underline;text-underline-offset:.2em;}
.inline-reference:hover {color:var(--text);}
.inline-reference:focus-visible {outline:2px solid var(--gold);outline-offset:3px;}
.appointment-reading {display:block;line-height:1.85;}
.page-end-action {margin-top:32px;}

/* Contact invitation: two columns, follow links beneath the appointment action. */
.home-contact {max-width:1280px;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:center;}
.home-contact-studio img {aspect-ratio:3/2;height:auto;object-fit:cover;}
.home-contact-follow {margin-top:30px;}
.home-contact-follow .social-label {margin:0 0 10px;}
.home-contact-follow .social-row {justify-content:flex-start;}
.studio-visit {max-width:1440px;margin-inline:auto;}
.studio-visit-heading {display:grid;grid-template-columns:1fr 1.4fr;gap:32px;align-items:start;margin-bottom:36px;}
.studio-visit-heading h2 {font-size:clamp(1.7rem,2.8vw,2.5rem);margin:0;}
.studio-visit-heading p {margin:0 0 12px;color:var(--muted);line-height:1.85;}
.studio-visit figure {margin:0;}
.studio-visit-main img {display:block;width:100%;height:auto;}
.studio-visit-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:24px;}
.studio-visit-grid img {display:block;width:100%;aspect-ratio:4/3;object-fit:cover;}
.studio-visit-grid figcaption {font-size:var(--fs-label);color:var(--muted);margin-top:12px;}
#beijing-studio {scroll-margin-top:140px;}
@media(max-width:760px){.home-contact {grid-template-columns:1fr;}.studio-visit-heading {grid-template-columns:1fr;gap:20px;}.studio-visit-grid {grid-template-columns:1fr;gap:28px;}.home-contact-studio {max-width:none;}}

/* Retain the approved homepage photograph in its original proportions. */
.home-contact-studio img {aspect-ratio:auto;height:auto;object-fit:contain;}
.studio-visit-grid img {aspect-ratio:3/2;}

/* Two landscape views beside a complete portrait garment photograph. */
.studio-visit-grid {grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;}
.studio-visit-portrait {grid-column:2;grid-row:1 / span 2;}
.studio-visit-grid .studio-visit-portrait img {aspect-ratio:3/4;object-fit:contain;}
@media(max-width:760px){.studio-visit-grid {grid-template-columns:1fr;}.studio-visit-portrait {grid-column:auto;grid-row:auto;}}

/* Appointment contact shares the page hero and studio gallery left edge. */
.appointment-contact {max-width:1440px;margin-inline:auto;padding-inline:var(--space-gutter);}
.appointment-contact .cinema-contact-grid {max-width:none;margin:0;grid-template-columns:minmax(0,1fr) 260px;}
@media(max-width:760px){.appointment-contact .cinema-contact-grid {grid-template-columns:1fr;max-width:none;}}

@media(max-width:760px){.appointment-contact {padding-inline:20px;}}

/* Separate the atelier visit gently; both photo columns share one height. */
.studio-visit {position:relative;}
.studio-visit::before {content:"";position:absolute;top:0;left:var(--space-gutter);right:var(--space-gutter);border-top:1px solid var(--line);}
@media(min-width:761px){
 .studio-visit-grid {aspect-ratio:3/2;grid-template-rows:repeat(2,minmax(0,1fr));align-items:stretch;}
 .studio-visit-grid figure {min-height:0;height:100%;}
 .studio-visit-grid img,.studio-visit-grid .studio-visit-portrait img {width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center;}
}
@media(max-width:760px){.studio-visit::before {left:20px;right:20px;}}

/* Anchor the follow area to the bottom edge of the homepage photograph. */
@media(min-width:761px){
 .home-contact {align-items:stretch;}
 .home-contact-info {display:flex;flex-direction:column;align-items:flex-start;}
 .home-contact-follow {margin-top:auto;padding-top:30px;}
}

@media(min-width:761px){.home-contact-follow .social-row a {align-items:flex-end;}}

@media(max-width:1100px){.home-contact {grid-template-columns:1fr;}.home-contact-info {display:block;}.home-contact-follow {margin-top:30px;padding-top:0;}.home-contact-follow .social-row a {align-items:center;}}