/* ==========================================================================
   室内设计事务所模板 — 扩展层
   在 style.css 之上叠加，仅放事务所专属组件与差异化
   ========================================================================== */

/* ---------- 差异化 1：标题改用衬线体（建筑 monograph 质感） ---------- */
:root {
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Songti SC",
    "STSong", Georgia, "Times New Roman", serif;
}

.display,
.detail-title {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* 拉丁字母在衬线下需要更松的字距，中文不需要 */
.display {
  letter-spacing: 0.005em;
}

/* ---------- 事务所字标 ---------- */
.wordmark {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 7vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- 全幅空间大图 ---------- */
.band {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.band.tall {
  aspect-ratio: 16 / 10;
}

.band.square {
  aspect-ratio: 4 / 3;
}

.band > span:not(.fill) {
  position: relative;
  z-index: 1;
}

/* 首页全幅入门图：贴边，无圆角 */
.band-bleed {
  aspect-ratio: 21 / 9;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}

.band-bleed > span:not(.fill) {
  position: relative;
  z-index: 1;
}

@media (max-width: 720px) {
  .band,
  .band-bleed {
    aspect-ratio: 4 / 3;
  }
  .band.tall {
    aspect-ratio: 4 / 5;
  }
}

/* ---------- 事务所说数字 ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

.stat .num {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1;
  letter-spacing: 0.01em;
}

.stat .lbl {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 12px;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .stats {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
  }
}

/* ---------- 服务流程（四步） ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}

.step {
  padding: var(--s-5) var(--s-4) var(--s-5) 0;
  border-right: 1px solid var(--line);
}

.step:last-child {
  border-right: 0;
}

.step .n {
  display: block;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--faint);
  margin-bottom: 24px;
}

.step .h3 {
  margin-bottom: 12px;
}

.step p {
  font-size: 13.5px;
  line-height: 1.68;
  color: var(--muted);
  max-width: 30ch;
}

@media (max-width: 860px) {
  .steps {
    grid-template-columns: 1fr 1fr;
  }
  .step {
    border-bottom: 1px solid var(--line);
    padding-right: var(--s-3);
  }
  .step:nth-child(2n) {
    border-right: 0;
  }
}

@media (max-width: 560px) {
  .steps {
    grid-template-columns: 1fr;
  }
  .step {
    border-right: 0;
    padding: var(--s-4) 0;
  }
}

/* ---------- 项目信息表（详情页 / 列表页通用） ---------- */
.info-table {
  border-top: 1px solid var(--line);
}

.info-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--s-4);
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

.info-row .k {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}

.info-row .v {
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.6;
}

@media (max-width: 560px) {
  .info-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 0;
  }
}

/* ---------- 服务清单（编辑式大列表） ---------- */
.service-list {
  border-top: 1px solid var(--line);
}

.service-item {
  display: grid;
  grid-template-columns: 60px 1fr 1.15fr;
  gap: var(--s-4);
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.service-item .n {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--faint);
  padding-top: 4px;
}

.service-item .h3 {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  letter-spacing: 0.05em;
}

.service-item p {
  font-size: 14px;
  line-height: 1.72;
  color: var(--muted);
}

@media (max-width: 720px) {
  .service-item {
    grid-template-columns: 40px 1fr;
    gap: var(--s-3);
    padding: 22px 0;
  }
  .service-item p {
    grid-column: 2;
  }
}

/* ---------- 团队 ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}

.member .portrait-sm {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}

.member .portrait-sm > span:not(.fill) {
  position: relative;
  z-index: 1;
}

.member .m-name {
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.member .m-role {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 5px;
}

@media (max-width: 860px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- 创始合伙人 ---------- */
.founders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  border-top: 1px solid var(--line);
  padding-top: var(--s-5);
}

.founder {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: var(--s-3);
  align-items: start;
}

.founder .portrait-sm {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.founder .portrait-sm > span:not(.fill) {
  position: relative;
  z-index: 1;
}

.founder .m-name {
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.founder .m-role {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 6px 0 12px;
}

.founder p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

@media (max-width: 860px) {
  .founders {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
}

@media (max-width: 480px) {
  .founder {
    grid-template-columns: 110px 1fr;
  }
}

/* ---------- 横构图图片位（如团队合影） ---------- */
.portrait-landscape {
  aspect-ratio: 1.45;
}

/* ============================================================
   双语层：英文为主体，中文作辅注
   ============================================================ */

/* 标题或段落下方的中文辅注（独立成行的小字） */
.cn-note {
  display: block;
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.85;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* 行内中文辅注：跟在英文标签、卡片名称、表单项之后 */
.cn-inline {
  display: inline-block;
  margin-left: 0.75em;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--faint);
}

/* 英文长句在衬线大标题下容易溢出，收紧上限并允许断行 */
.wordmark {
  font-size: clamp(1.75rem, 5.6vw, 4.4rem);
  overflow-wrap: break-word;
}

/* ---------- 合作品牌 / 客户条（静态版跑马灯替代） ---------- */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5) var(--s-6);
  align-items: center;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.logo-strip span {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---------- 项目卡：空间型比例（横图更适合室内） ---------- */
.work-grid.spaces .work-thumb {
  aspect-ratio: 4 / 3;
}

/* ---------- 咨询表单补充字段 ---------- */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--s-4);
}

@media (max-width: 560px) {
  .field-row {
    grid-template-columns: 1fr;
  }
}

/* ---------- 详情页：图文错落 ---------- */
.spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  align-items: center;
}

.spread.rev .spread-text {
  order: 2;
}

.spread-text p {
  font-size: 1rem;
  line-height: 1.78;
  color: var(--ink-2);
}

@media (max-width: 720px) {
  .spread {
    grid-template-columns: 1fr;
  }
  .spread.rev .spread-text {
    order: 0;
  }
}

/* ==========================================================================
   深色编辑风主题（Dark Editorial）
   —— 只重写设计令牌，组件规则全部读变量，因此不需要重写任何组件
   —— 强调色由原来的墨黑改为古铜金，落在字标、下划线、序号、引用上
   ========================================================================== */
:root {
  /* 暖炭黑底：比纯黑多一点温度，配空间渲染图不发闷 */
  --bg: #131210;
  --bg-alt: #1a1917;
  --surface: #1c1b18;
  --bg-glass: rgba(19, 18, 16, 0.72);

  --ink: #f2efe9;                                  /* 暖米白主文字 */
  --ink-2: rgba(242, 239, 233, 0.76);
  --muted: rgba(242, 239, 233, 0.52);
  --faint: rgba(242, 239, 233, 0.34);
  --line: rgba(242, 239, 233, 0.13);
  --line-strong: rgba(242, 239, 233, 0.24);

  --accent: #c79a63;                               /* 古铜金 */
  --accent-soft: rgba(199, 154, 99, 0.14);
}

/* 氛围光：右上角古铜色极淡光晕 + 左下角补一点，避免大面积纯黑 */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 620px at 82% -10%, rgba(199, 154, 99, 0.13), transparent 62%),
    radial-gradient(880px 520px at -10% 20%, rgba(199, 154, 99, 0.05), transparent 60%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

::selection {
  background: var(--accent);
  color: #17150f;
}

/* ---------- 强调色落点 ---------- */
.brand-mark {
  border-color: var(--accent);
  color: var(--accent);
}

.link-line::after,
.nav-links > li > a::after,
.filter-btn::after {
  background: var(--accent);
}

.pull-quote {
  border-left-color: var(--accent);
}

.service-item .n,
.step .n {
  color: var(--accent);
}

/* ---------- 按钮：主按钮改为古铜金实底，次按钮描边 ---------- */
.btn {
  background: var(--accent);
  border-color: var(--accent);
  color: #17150f;
}

.btn:hover {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}

.btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn-ghost:hover {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- CTA 区块加一层金属光泽，作为版面收尾 ---------- */
.cta {
  background: linear-gradient(180deg, var(--accent-soft), transparent 78%);
  border-top: 1px solid var(--line);
}

/* ---------- 渐变占位块改为暗调，与底色衔接 ---------- */
.fill.g-1 { background: linear-gradient(150deg, #201e1a, #35322b 60%, #4f4a3f); }
.fill.g-2 { background: linear-gradient(150deg, #1d1f22, #2e3236 60%, #464b50); }
.fill.g-3 { background: linear-gradient(150deg, #2a1f16, #45301f 60%, #6b4c2e); }
.fill.g-4 { background: linear-gradient(150deg, #1c2422, #26362f 60%, #3d584c); }
.fill.g-5 { background: linear-gradient(150deg, #26191b, #3a2429 60%, #5a3a41); }
.fill.g-6 { background: linear-gradient(150deg, #1a1d28, #242a3c 60%, #3a445e); }

/* ---------- 细部：页脚与表格在深底上的层次 ---------- */
.site-footer {
  border-top-color: var(--line);
}

.info-table .info-row,
.service-item,
.step,
.logo-strip,
.founders {
  border-color: var(--line);
}

/* ==========================================================================
   实景图片接入补充（2026-10-13 桐安里）
   ========================================================================== */

/* 作品卡：室内项目以横构图渲染图为主，4/3 比 4/5 更贴合（覆盖基础层） */
.work-thumb {
  aspect-ratio: 4 / 3;
}

/* 全幅大图 3/2 变体：21/9 会把弧形天花裁掉，3/2 基本完整保留 */
.band-bleed.tall {
  aspect-ratio: 3 / 2;
}

/* 超宽横幅变体（如书房 3:1 双联全景图），几乎不裁切 */
.band-bleed.ultra {
  aspect-ratio: 3 / 1;
}

/* 图文错落：竖构图变体（如西式厨房 3:4 渲染图） */
.band.portrait {
  aspect-ratio: 3 / 4;
}

/* 图位：正方形变体（平面图线稿） */
.img-ph.square {
  aspect-ratio: 1 / 1;
}

/* 线稿类图片完整显示不裁切：白底图纸放在深底上，像钉在墙上的图纸 */
.fill.contain {
  object-fit: contain;
}

.img-ph.square {
  background: transparent;
}

/* ============================================================
   品牌图形（确认版 logo，2026-10-13）
   花押 OC · 原稿灰调 → 重着色为暖米白（与全站文字同色）
   ============================================================ */

/* 页头：花押替代原「O」字母方块（透明 PNG，随文字色） */
.brand-mark-img {
  display: block;
  width: auto;
  height: 26px;
}

/* 页脚品牌区：完整 logo（花押 + Oasis Collective + 绿｜洲｜公｜社） */
.footer-logo {
  display: block;
  width: auto;
  height: 104px;
  margin: 0 0 16px;
  opacity: 0.94;
}