.work-meta strong {
  color: var(--fire);
  font-size: 10px;
  line-height: 1.55;
  text-align: right;
  font-weight: 600;
}

.no-break {
  white-space: nowrap;
}

.mobile-break {
  display: none;
}

.hero-shade {
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 10, 8, 0.62) 0%, rgba(8, 10, 8, 0.38) 38%, rgba(8, 10, 8, 0.08) 72%, rgba(8, 10, 8, 0.28) 100%),
    linear-gradient(0deg, rgba(8, 10, 8, 0.78), transparent 48%);
}

.hero-video-play {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 4;
  min-height: 44px;
  padding: 0 15px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(239, 238, 232, 0.28);
  border-radius: 999px;
  color: var(--porcelain);
  background: rgba(17, 20, 17, 0.76);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: 0.25s ease;
  backdrop-filter: blur(8px);
}

.hero-video-play span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--coal);
  background: var(--fire);
  font-size: 11px;
}

.hero-video-play.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.work-meta {
  min-height: 66px;
  padding-top: 11px;
  padding-bottom: 11px;
  align-items: flex-start;
}

.work-meta p {
  margin-top: 2px;
}

.service-title > span,
.process header > span,
.contact-copy > span {
  font-family: "PingFang SC", "Source Han Sans SC", "Microsoft YaHei",
    sans-serif;
  letter-spacing: 0.2em;
}

.contact {
  background: linear-gradient(145deg, #632118 0%, #481914 100%);
}

.contact-qr {
  width: min(100%, 320px);
  justify-self: center;
}

.floating-wechat {
  overflow: hidden;
  transition:
    opacity 0.25s ease,
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    padding 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-wechat .wechat-icon {
  flex: 0 0 auto;
}

.floating-wechat .wechat-label {
  width: auto;
  height: auto;
  display: block;
  max-width: 64px;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 0;
  color: inherit;
  background: transparent;
  opacity: 1;
  transition:
    max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.2s ease;
}

.floating-wechat.is-compact {
  padding-right: 7px;
}

.floating-wechat.is-compact .wechat-label {
  max-width: 0;
  opacity: 0;
}

.floating-wechat.is-hidden {
  pointer-events: none;
  opacity: 0;
  transform: translateY(14px) scale(0.88);
}

body.menu-open {
  overflow: hidden;
  touch-action: none;
}

.details details > :not(summary) {
  animation: detail-open 0.22s ease both;
}

@keyframes detail-open {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Typography system: local-first, no web-font download. */
html {
  text-rendering: optimizeLegibility;
}

body {
  font-family: "PingFang SC", "Source Han Sans SC", "Noto Sans CJK SC",
    "Microsoft YaHei", system-ui, sans-serif;
  font-weight: 400;
  font-synthesis: none;
  font-kerning: normal;
}

h1,
h2,
h3,
strong,
b {
  font-family: "PingFang SC", "Source Han Sans SC", "Noto Sans CJK SC",
    "Microsoft YaHei", system-ui, sans-serif;
  font-synthesis: none;
}

.hero h1 {
  font-weight: 800;
  letter-spacing: -0.065em;
  line-height: 0.89;
}

.statement h2,
.section-head h2,
.service-title h2,
.process header h2,
.about-copy h2,
.contact-copy h2 {
  font-weight: 750;
  letter-spacing: -0.052em;
}

.hero-bottom p,
.statement-copy,
.section-head p,
.service-title p,
.process header p,
.process-list p,
.about-copy p,
.contact-copy > p,
.details p {
  font-weight: 400;
  letter-spacing: 0.005em;
}

.location,
.section-head span,
.service-title > span,
.process header > span,
.about-copy > span,
.contact-copy > span,
.asset-hint,
.brand span {
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-stretch: condensed;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.service-lead b,
.proof strong,
.service-panel dd,
.work-meta strong {
  font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "PingFang SC",
    monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.045em;
}

.work-meta h3,
.process-list h3 {
  font-weight: 650;
  letter-spacing: -0.025em;
}

.work-meta p,
.service-lead span,
.proof span {
  font-weight: 400;
  letter-spacing: 0.025em;
}

@media (max-width: 600px) {
  .hero h1 {
    font-size: 45.5px;
    letter-spacing: -0.065em;
    line-height: 0.97;
  }

  .hero-shade {
    background:
      linear-gradient(90deg, rgba(7, 9, 7, 0.38), rgba(7, 9, 7, 0.06) 88%),
      linear-gradient(0deg, rgba(7, 9, 7, 0.8) 5%, rgba(7, 9, 7, 0.58) 32%, rgba(7, 9, 7, 0.08) 68%, rgba(7, 9, 7, 0.16));
  }

  .hero-video-play {
    top: 14px;
    right: auto;
    left: 14px;
    min-height: 40px;
    padding-right: 12px;
    font-size: 10px;
  }

  .is-wechat .hero-video-play {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .mobile-break {
    display: block;
  }

  .statement h2,
  .process header h2 {
    letter-spacing: -0.055em;
    line-height: 1;
  }

  .service-title h2 {
    font-size: 34px;
    line-height: 1.12;
    letter-spacing: -0.05em;
  }

  .process header h2 {
    font-size: 40px;
    line-height: 1.06;
  }

  .about-copy h2 {
    font-size: 35px;
    line-height: 1.12;
    letter-spacing: -0.05em;
  }

  .contact-copy h2 {
    font-size: 37px;
    line-height: 1.08;
    letter-spacing: -0.05em;
  }

  .work-meta strong {
    display: block;
    margin-top: 8px;
    text-align: left;
    font-size: 9px;
  }

  .work-meta {
    min-height: 61px;
    padding: 9px;
  }

  .contact-qr {
    width: min(100%, 300px);
    padding: 16px;
  }

  .floating-wechat {
    right: max(7px, env(safe-area-inset-right));
    bottom: max(7px, env(safe-area-inset-bottom));
    padding: 5px 10px 5px 5px;
    font-size: 10px;
  }

  .floating-wechat .wechat-icon {
    width: 25px;
    height: 25px;
  }

  .floating-wechat.is-compact {
    padding-right: 5px;
  }
}

@media (max-width: 380px) {
  .service-title h2 {
    font-size: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .frame-main video {
    display: block;
  }

  .frame-main.has-media .video-fallback {
    display: none;
  }
}

.cover-1 { background-image: url('assets/images/works/work-01.jpg'); }
.cover-2 { background-image: url('assets/images/works/work-02.jpg'); }
.cover-3 { background-image: url('assets/images/works/work-03.jpg'); }
.cover-4 { background-image: url('assets/images/works/work-04.jpg'); }
.cover-5 { background-image: url('assets/images/works/work-05.jpg'); }
.cover-6 { background-image: url('assets/images/works/work-06.jpg'); }
.video-cover.is-placeholder { cursor: default; }
.video-cover.is-placeholder::after {
  background: linear-gradient(180deg, rgba(8, 10, 8, .08), rgba(8, 10, 8, .55));
}

footer small a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}

footer small a:hover {
  color: var(--porcelain);
}