/* =================================================================
 * text-layout.css · 4 屏文字排版（从 draft-concept-4-screens-transition.html 抽离）
 * 选择器命名约定：draft 的 #section-N → homepage 的 #screen-N
 * 文字层包裹在 .content-box 内（位于 .screen-scale-stage 之外），z-index 12+
 * ================================================================= */

#screen-1 .content-box,
#screen-2 .content-box,
#screen-3 .content-box,
#screen-4 .content-box {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  color: #111;
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
#screen-1 .content-box > *,
#screen-2 .content-box > *,
#screen-3 .content-box > *,
#screen-4 .content-box > * {
  pointer-events: auto;
}

/* ========== 第二屏（足迹漫画 iframe，移植自 draft section-2） ========== */
#screen-2 .content-box {
  width: 100%; height: 100%;
  margin: 0; max-width: none;
  background: transparent;
  padding: 0; border-radius: 0; border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#screen-2 .section-embed {
  display: block;
  width: 100%; height: 100%;
  border: 0;
  background: transparent;
  /* iframe 整体可接收事件；具体哪些区域穿透/可交互，
     由子页面 overlay 模式的 CSS 控制（body pe:none + 个别元素 pe:auto）。 */
  pointer-events: auto;
}

/* ========== 第一屏 ========== */
#screen-1 .content-box {
  margin-left: max(5vw, calc(50vw - 650px));
  max-width: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#screen-1 h1 {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.04em;
  margin-bottom: 1.5rem;
}
/* 背景大字母：与参考稿 draft-concept 字体一致（Windows 上为微软雅黑），
   否则会回退成 sans-serif/Arial，字形不同，看起来像“独立线条、不成空心形状”。
   保留参考稿那条极淡的斜向流光（0.06），但把这个 25vw 巨型字单独提升成
   独立合成层（will-change + translateZ + contain），让它的重绘被隔离、
   不再连累第一屏丝绸 WebGL，GPU 也能缓存，流光因此顺滑不卡。 */
#screen-1 .shimmer-text {
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0,0,0,0.06);
  background: linear-gradient(
    120deg,
    transparent 35%,
    rgba(0,0,0,0.06) 50%,
    transparent 65%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  animation: tl-subtle-shimmer 10s linear infinite;
  /* 性能隔离：让这层独立合成、独立重绘，不拖累丝绸 */
  will-change: background-position;
  transform: translateZ(0);
  contain: paint;
}
@keyframes tl-subtle-shimmer {
  0% { background-position: 200% center; }
  100% { background-position: 0% center; }
}
#screen-1 .tool-card:hover {
  background: rgba(255,255,255,0.95) !important;
  border-color: rgba(0,0,0,0.15) !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
@keyframes tl-bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(5px); }
  60% { transform: translateY(3px); }
}
@media (max-width: 1100px), (max-height: 700px) {
  #screen-1 .screen1-side-label,
  #screen-1 .screen1-tech-meta { opacity: 0.42; }
  #screen-1 .shimmer-text { opacity: 0.72; }
}
@media (max-width: 900px), (max-height: 560px) {
  #screen-1 .screen1-side-label,
  #screen-1 .screen1-tech-meta { display: none !important; }
}

/* ========== 第三屏 ========== */
#screen-3 .content-box {
  width: 100%; height: 100%;
  max-width: none;
  background: none;
  padding: 0;
  border: none;
  border-radius: 0;
  perspective: 2000px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}
#screen-3 .e3-hud-h-wrap {
  position: absolute; top: 15.5%; left: 5%;
  z-index: 6; pointer-events: none;
  transform: rotateY(30deg) rotateX(1deg) translateZ(100px);
  transform-origin: left center;
  transform-style: preserve-3d;
}
#screen-3 .e3-hud-h-wrap .hud-h {
  width: 140px; height: 1px;
  background: linear-gradient(90deg, rgba(17,24,39,0.4), rgba(17,24,39,0.22));
}
#screen-3 .e3-hud-h-wrap .hud-corner {
  position: absolute; top: -2px; right: -3px;
  width: 5px; height: 5px;
  border: 1px solid rgba(17,24,39,0.3);
}
#screen-3 .e3-hud-target {
  position: absolute; top: 16%; left: 14%;
  z-index: 2; pointer-events: none;
}
#screen-3 .e3-hud-target .hud-diag {
  position: absolute; top: 0; left: 0;
  width: 220px; height: 1px;
  background: linear-gradient(90deg, rgba(17,24,39,0.22), rgba(17,24,39,0.03));
  transform: rotate(32deg);
  transform-origin: left center;
}
#screen-3 .e3-hud-target .hud-dot {
  position: absolute; top: 116px; left: 186px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(17,24,39,0.35);
  box-shadow: 0 0 0 3px rgba(17,24,39,0.06);
  animation: tl-hudPulse 2.5s infinite;
}
@keyframes tl-hudPulse {
  0% { box-shadow: 0 0 0 0 rgba(17,24,39,0.15); }
  70% { box-shadow: 0 0 0 8px rgba(17,24,39,0); }
  100% { box-shadow: 0 0 0 0 rgba(17,24,39,0); }
}
#screen-3 .e3-left-meta {
  position: absolute; top: 13%; left: 5%; z-index: 6;
  font-family: "Cormorant Garamond", "Noto Serif SC", serif;
  color: rgba(17,24,39,0.5); letter-spacing: 0.25em;
  pointer-events: none;
  transform: rotateY(30deg) rotateX(1deg) translateZ(100px);
  transform-origin: left center;
  transform-style: preserve-3d;
}
#screen-3 .e3-left-meta::before {
  content: ''; position: absolute;
  left: -14px; top: -4px; bottom: -4px;
  width: 6px;
  border-top: 1px solid rgba(17,24,39,0.3);
  border-bottom: 1px solid rgba(17,24,39,0.3);
  border-left: 1px solid rgba(17,24,39,0.3);
  opacity: 0.8;
}
#screen-3 .e3-left-meta .cn { font-size: 13px; font-weight: 600; margin-bottom: 8px; letter-spacing: 0.3em; }
#screen-3 .e3-left-meta .line { width: 140px; height: 1px; background: linear-gradient(90deg, rgba(17,24,39,0.4), transparent); margin: 0 0 8px 0; }
#screen-3 .e3-left-meta .en { font-size: 10px; opacity: 0.8; font-weight: 500; font-family: "Inter", monospace; }
#screen-3 .e3-left-card,
#screen-3 .e3-right-card {
  position: absolute;
  z-index: 8;
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  transform-style: preserve-3d;
}
#screen-3 .e3-left-card {
  left: 2%; top: 27%;
  width: min(32vw, 440px); min-width: 380px;
  padding: 18px 30px 26px 18px;
  justify-content: flex-start;
}
#screen-3 .e3-right-card {
  right: 3%; top: 39%;
  width: min(28vw, 400px); min-width: 320px;
  padding: 18px 18px 24px 30px;
  justify-content: flex-end;
}
#screen-3 .e3-left-card-surface,
#screen-3 .e3-right-card-surface {
  position: relative;
  border-radius: 20px;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,0.52);
  background: linear-gradient(135deg, rgba(250,248,245,0.82) 0%, rgba(245,241,236,0.76) 100%);
  box-shadow: 0 12px 40px rgba(17,24,39,0.07), 0 2px 6px rgba(17,24,39,0.03), inset 0 1px 0 rgba(255,255,255,0.5);
  transform-style: preserve-3d;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.38s ease, border-color 0.38s ease;
}
#screen-3 .e3-left-card-surface {
  width: min(26vw, 380px); min-width: 320px;
  padding: 38px 32px;
  transform: rotateY(30deg) rotateX(1deg) translateZ(100px);
  transform-origin: left center;
}
#screen-3 .e3-right-card-surface {
  width: min(22vw, 340px); min-width: 280px;
  padding: 34px 28px;
  transform: rotateY(-18deg) rotateX(1deg) translateZ(60px);
  transform-origin: right center;
}
#screen-3 .e3-left-card:hover .e3-left-card-surface {
  border-color: rgba(255,255,255,0.68);
  box-shadow: 0 20px 56px rgba(17,24,39,0.10), 0 4px 12px rgba(17,24,39,0.05);
  transform: rotateY(30deg) rotateX(1deg) translateZ(120px) translateX(4px) translateY(-3px);
}
#screen-3 .e3-right-card:hover .e3-right-card-surface {
  border-color: rgba(255,255,255,0.68);
  box-shadow: 0 20px 56px rgba(17,24,39,0.10), 0 4px 12px rgba(17,24,39,0.05);
  transform: rotateY(-18deg) rotateX(1deg) translateZ(80px) translateX(-4px) translateY(-3px);
}
#screen-3 .e3-left-card-surface::before,
#screen-3 .e3-right-card-surface::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255,255,255,0.18) 0%, rgba(248,246,242,0.06) 100%);
  pointer-events: none; z-index: 0;
}
#screen-3 .e3-left-card-surface::after,
#screen-3 .e3-right-card-surface::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 16% 14%, rgba(255,255,255,0.52) 0%, rgba(255,255,255,0.20) 24%, transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 44%, transparent 78%);
  opacity: 0.84;
  transition: opacity 0.22s ease, transform 0.22s ease, filter 0.22s ease;
  pointer-events: none; z-index: 1;
}
#screen-3 .e3-left-card:hover .e3-left-card-surface::after,
#screen-3 .e3-right-card:hover .e3-right-card-surface::after {
  opacity: 0.90; filter: brightness(1.03);
  transform: translateY(-1px);
}
#screen-3 .e3-left-card-surface > *,
#screen-3 .e3-right-card-surface > * {
  position: relative; z-index: 2;
}
#screen-3 .e3-left-card-surface h2 { margin: 0 0 24px 0; font-size: clamp(38px, 2.6vw, 48px); line-height: 1.25; letter-spacing: -0.02em; color: #111; font-weight: 600; }
#screen-3 .e3-left-card-surface p { margin: 0; font-size: 15px; line-height: 1.8; color: #555; max-width: 18em; font-weight: 400; }
#screen-3 .e3-tags { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; margin-bottom: 32px; }
#screen-3 .e3-tag { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 16px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.05); background: rgba(255,255,255,0.6); color: #333; font-size: 13px; font-weight: 500; letter-spacing: 0.05em; transition: all 0.3s ease; }
#screen-3 .e3-tag:hover,
#screen-3 .e3-tag.tag-hover { background: rgba(255,255,255,1); border-color: rgba(0,0,0,0.1); }
#screen-3 .e3-primary { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; border-radius: 10px; border: 0; appearance: none; -webkit-appearance: none; background: #111; color: #fff; font: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0.1em; text-decoration: none; transition: all 0.3s ease; }
#screen-3 .e3-primary:hover,
#screen-3 .e3-primary.btn-hover { background: #000; transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,0.15); cursor: pointer; }
#screen-3 .e3-contact-modal {
  position: absolute; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.26s ease;
}
#screen-3 .e3-contact-modal.is-open { opacity: 1; pointer-events: auto; }
#screen-3 .e3-contact-modal[hidden] { display: none; }
#screen-3 .e3-contact-backdrop {
  position: absolute; inset: 0;
  background: rgba(18,16,14,0.46);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
#screen-3 .e3-contact-dialog {
  position: relative; z-index: 1;
  width: min(92vw, 400px);
  padding: 26px 28px 24px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.7);
  background: rgba(250,248,245,0.98);
  box-shadow: 0 28px 70px rgba(17,24,39,0.34), inset 0 1px 0 rgba(255,255,255,0.6);
  transform: translateY(14px) scale(0.96);
  transition: transform 0.26s cubic-bezier(0.22,1,0.36,1);
}
#screen-3 .e3-contact-modal.is-open .e3-contact-dialog { transform: translateY(0) scale(1); }
#screen-3 .e3-contact-close {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent;
  width: 28px; height: 28px; border-radius: 8px;
  font-size: 15px; line-height: 1; color: rgba(17,24,39,0.5); cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
#screen-3 .e3-contact-close:hover { background: rgba(17,24,39,0.06); color: #111; }
#screen-3 .e3-contact-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 6px; }
#screen-3 .e3-contact-title { font-family: "Noto Serif SC", serif; font-size: 17px; font-weight: 600; letter-spacing: 0.08em; color: #222; }
#screen-3 .e3-contact-status { min-height: 16px; text-align: left; font-size: 11px; letter-spacing: 0.14em; color: rgba(52,199,89,0.9); margin-bottom: 6px; }
#screen-3 .e3-contact-row { display: grid; grid-template-columns: 78px 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(17,24,39,0.06); }
#screen-3 .e3-contact-label { font-size: 11px; letter-spacing: 0.16em; color: rgba(17,24,39,0.45); text-transform: uppercase; }
#screen-3 .e3-contact-value { font-size: 14px; letter-spacing: 0.04em; color: #1f2937; white-space: nowrap; }
#screen-3 .e3-contact-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
#screen-3 .e3-copy,
#screen-3 .e3-link-action {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 11px;
  border-radius: 8px;
  border: 1px solid rgba(17,24,39,0.10);
  background: rgba(255,255,255,0.62); color: #222;
  font-size: 12px; line-height: 1; text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
#screen-3 .e3-copy:hover,
#screen-3 .e3-link-action:hover { background: #fff; border-color: rgba(17,24,39,0.2); transform: translateY(-1px); }
#screen-3 .e3-link-action { height: 34px; font-size: 12px; letter-spacing: 0.08em; }
#screen-3 .e3-right-meta {
  position: absolute; top: 14%; right: 5%; z-index: 7;
  text-align: right; color: rgba(17,24,39,0.5);
  pointer-events: none;
  transform: rotateY(-18deg) rotateX(1deg) translateZ(60px);
  transform-origin: right center;
  transform-style: preserve-3d;
}
#screen-3 .e3-right-meta::after {
  content: ''; position: absolute;
  right: -14px; top: -4px; bottom: -4px;
  width: 6px;
  border-top: 1px solid rgba(17,24,39,0.3);
  border-bottom: 1px solid rgba(17,24,39,0.3);
  border-right: 1px solid rgba(17,24,39,0.3);
  opacity: 0.8;
}
#screen-3 .e3-right-meta .bg-number {
  position: absolute; top: -100px; right: -30px;
  font-family: 'Inter', sans-serif;
  font-size: 180px; font-weight: 800;
  color: rgba(0,0,0,0.025);
  line-height: 0.8; letter-spacing: -0.05em;
  z-index: -1;
  transform: translateZ(-20px);
}
#screen-3 .e3-right-meta .title { font-family: "Noto Serif SC", serif; font-size: 15px; font-weight: 700; letter-spacing: 0.25em; margin-bottom: 12px; color: #333; }
#screen-3 .e3-right-meta .desc { font-size: 13px; line-height: 2; letter-spacing: 0.12em; color: #666; font-weight: 400; }
#screen-3 .e3-right-card-surface .kicker { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; color: #888; margin-bottom: 16px; }
#screen-3 .e3-right-card-surface h3 { margin: 0 0 20px 0; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.5; letter-spacing: 0.02em; color: #111; font-weight: 600; }
#screen-3 .e3-right-card-surface .divider { height: 1px; background: linear-gradient(90deg, rgba(0,0,0,0.1), transparent); margin-bottom: 20px; }
#screen-3 .e3-right-card-surface p { margin: 0; font-size: 14px; line-height: 1.8; color: #555; }
#screen-3 .e3-bottom-left {
  position: absolute; left: 16%; bottom: 8%;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  color: rgba(17,24,39,0.5); pointer-events: none; z-index: 9;
  animation: tl-e3ExploreFloat 3.1s ease-in-out infinite;
  transform: rotateY(20deg) translateZ(60px);
  transform-origin: left bottom;
}
#screen-3 .e3-bottom-left .label { writing-mode: vertical-rl; font-size: 13px; font-weight: 600; letter-spacing: 0.3em; line-height: 2; font-family: "Noto Serif SC", serif; }
#screen-3 .e3-bottom-left .arrow { font-size: 20px; opacity: 0.8; animation: tl-e3ExploreArrow 1.9s ease-in-out infinite; }
#screen-3 .e3-bottom-right {
  position: absolute; right: 10%; bottom: 8%;
  text-align: right; color: rgba(17,24,39,0.4); z-index: 9;
  pointer-events: none;
  transform: rotateY(-18deg) translateZ(60px);
  transform-origin: right bottom;
}
#screen-3 .e3-bottom-right .small { font-family: "Inter", monospace; font-size: 10px; letter-spacing: 0.25em; margin-bottom: 8px; text-transform: uppercase; }
#screen-3 .e3-bottom-right .large { font-family: "Noto Serif SC", serif; font-size: 24px; letter-spacing: 0.15em; font-weight: 600; color: #222; margin-bottom: 8px; }
#screen-3 .e3-bottom-right .sub-text { font-family: "Noto Serif SC", serif; font-size: 12px; letter-spacing: 0.05em; color: #777; line-height: 1.6; }
@keyframes tl-e3ExploreFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes tl-e3ExploreArrow { 0%, 100% { transform: translateY(0); opacity: 0.78; } 50% { transform: translateY(6px); opacity: 1; } }
@media (max-width: 1440px) {
  #screen-3 .e3-left-card { min-width: 330px; width: min(31vw, 398px); }
  #screen-3 .e3-right-card { min-width: 280px; width: min(24vw, 326px); }
  #screen-3 .e3-left-card h2 { font-size: clamp(34px, 2.5vw, 46px); }
}

/* ========== 第四屏 ========== */
#screen-4 .content-box {
  width: 100%; height: 100%;
  padding: 0; position: absolute; inset: 0;
}
#screen-4 .e4-decor-grid {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(rgba(0,0,0,0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none; z-index: 1;
}
#screen-4 .e4-horizontal-line {
  position: absolute; bottom: 25%; left: 6%; right: 6%;
  height: 1px;
  background: linear-gradient(to right, rgba(0,0,0,0.02), rgba(0,0,0,0.06), rgba(0,0,0,0.02));
  z-index: 1; pointer-events: none;
}
#screen-4 .e4-vision-statement {
  position: absolute; bottom: 12%; left: 28%;
  width: 400px; z-index: 5;
  color: rgba(0,0,0,0.45);
  border-left: 1px solid rgba(0,0,0,0.15);
  padding-left: 24px;
  pointer-events: none;
}
#screen-4 .e4-vision-statement .en { font-family: 'Cormorant Garamond', serif; font-size: 16px; font-style: italic; letter-spacing: 0.05em; margin-bottom: 12px; color: rgba(0,0,0,0.6); }
#screen-4 .e4-vision-statement .zh { font-family: 'Noto Serif SC', serif; font-size: 12px; line-height: 2; letter-spacing: 0.12em; text-align: justify; }
#screen-4 .e4-top-right-meta {
  position: absolute; top: 6%; right: 4%;
  display: flex; align-items: center; gap: 16px;
  font-family: 'Inter', monospace;
  font-size: 9px; letter-spacing: 0.25em;
  color: rgba(0,0,0,0.25);
  z-index: 5; pointer-events: none;
}
#screen-4 .e4-top-right-meta .line { width: 60px; height: 1px; background: rgba(0,0,0,0.15); }
#screen-4 .e4-center-meta {
  position: absolute; top: 62%; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  pointer-events: auto; z-index: 15; opacity: 0.6;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#screen-4 .e4-center-meta:hover { opacity: 1; transform: translateX(-50%) translateY(4px); }
#screen-4 .e4-center-meta .axis-y { width: 1px; height: 80px; background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.3), transparent); margin-bottom: 12px; transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
#screen-4 .e4-center-meta:hover .axis-y { height: 95px; background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.8), transparent); }
#screen-4 .e4-center-meta .coord { font-family: 'Inter', monospace; font-size: 9px; letter-spacing: 0.35em; color: #333; margin-bottom: 6px; transition: all 0.4s ease; }
#screen-4 .e4-center-meta .desc { font-family: 'Cormorant Garamond', serif; font-size: 11px; font-style: italic; letter-spacing: 0.1em; color: rgba(0,0,0,0.5); border-bottom: 1px solid transparent; padding-bottom: 2px; transition: all 0.4s ease; }
#screen-4 .e4-center-meta:hover .desc { color: rgba(0,0,0,0.9); border-bottom-color: rgba(0,0,0,0.3); }
#screen-4 .e4-super-watermark {
  position: absolute; bottom: 10%; left: 4%;
  font-family: 'Noto Serif SC', serif;
  font-size: clamp(160px, 20vw, 280px);
  color: rgba(0,0,0,0.025);
  font-weight: 200; z-index: 1;
  pointer-events: none; letter-spacing: 0.12em; user-select: none;
}
#screen-4 .e4-spine-title { position: absolute; top: 8%; left: 8%; z-index: 10; pointer-events: none; }
#screen-4 .e4-spine-title .vert { writing-mode: vertical-rl; font-family: 'Noto Serif SC', serif; font-size: clamp(52px, 4.8vw, 72px); font-weight: 600; color: #111; letter-spacing: 0.35em; border-left: 2px solid rgba(0,0,0,0.18); padding-left: 24px; display: block; }
#screen-4 .e4-spine-title .sub { display: block; margin-top: 20px; padding-left: 26px; font-family: 'Inter', monospace; font-size: 10px; color: #999; letter-spacing: 0.3em; text-transform: uppercase; border-left: 2px solid rgba(0,0,0,0.18); white-space: nowrap; }
#screen-4 .e4-spine-title .hline { display: block; margin-top: 16px; margin-left: 26px; width: 120px; height: 1px; background: linear-gradient(90deg, rgba(0,0,0,0.25), transparent); }
#screen-4 .e4-left-stat {
  position: absolute; top: 48%; left: 8%;
  z-index: 10; pointer-events: none;
  border-left: 2px solid rgba(0,0,0,0.12);
  padding-left: 24px;
  display: flex; flex-direction: column; gap: 24px;
}
#screen-4 .e4-left-stat .stat-item { display: flex; flex-direction: column; gap: 4px; }
#screen-4 .e4-left-stat .stat-num { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 600; color: rgba(0,0,0,0.35); line-height: 1; letter-spacing: 0.02em; }
#screen-4 .e4-left-stat .stat-label { font-family: 'Inter', monospace; font-size: 9px; color: #999; letter-spacing: 0.25em; text-transform: uppercase; }
#screen-4 .e4-data-block {
  position: absolute; bottom: 6.5%; left: 4.5%;
  width: min(23vw, 360px);
  z-index: 10;
  padding: 18px 22px 16px;
  pointer-events: auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.84) 0%, rgba(248,244,239,0.74) 100%);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 16px 34px rgba(0,0,0,0.06);
}
#screen-4 .e4-data-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(0,0,0,0.08); }
#screen-4 .e4-data-title { font-family: 'Noto Serif SC', serif; font-size: 17px; color: #222; letter-spacing: 0.08em; }
#screen-4 .e4-data-kicker { font-family: 'Inter', monospace; font-size: 9px; color: #999; letter-spacing: 0.24em; text-transform: uppercase; }
#screen-4 .e4-data-row { display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: start; padding: 6px 0; }
#screen-4 .e4-data-row + .e4-data-row { border-top: 1px solid rgba(0,0,0,0.04); }
#screen-4 .e4-data-row span { font-family: 'Inter', monospace; font-size: 10px; color: #777; letter-spacing: 0.16em; text-transform: uppercase; }
#screen-4 .e4-data-row .value { font-family: 'Cormorant Garamond', 'Noto Serif SC', serif; font-size: 15px; color: #333; letter-spacing: 0.04em; line-height: 1.55; text-transform: none; }
#screen-4 .e4-data-note { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.08); font-family: 'Inter', monospace; font-size: 9px; color: #9a9a9a; letter-spacing: 0.18em; text-transform: uppercase; }
#screen-4 .e4-cards-wrapper {
  position: absolute; top: 16%; left: 24%; right: 8%;
  display: flex; gap: 24px; align-items: stretch;
  z-index: 10; pointer-events: auto;
}
#screen-4 .e4-editorial-card {
  position: relative; flex: 1;
  box-sizing: border-box;
  height: clamp(340px, 37vh, 380px);
  min-width: 0;
  background: linear-gradient(145deg, rgba(255,255,255,0.7), rgba(248,244,239,0.5));
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 30px rgba(0,0,0,0.03);
  padding: clamp(24px, 2.1vw, 32px);
  display: flex; flex-direction: column;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.42s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.36s ease;
  cursor: pointer; overflow: hidden;
  contain: paint;
  isolation: isolate;
  will-change: transform;
  --mouse-x: 50%; --mouse-y: 50%;
}
#screen-4 .e4-editorial-card::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 28%, transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 38%);
  opacity: 0.72;
  transform: translate3d(0,0,0);
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none; z-index: 1;
}
#screen-4 .e4-editorial-card::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle 420px at var(--mouse-x) var(--mouse-y), rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.09) 22%, rgba(255,255,255,0.04) 42%, transparent 70%);
  opacity: 0;
  transition: opacity 0.48s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none; z-index: 2;
}
#screen-4 .e4-editorial-card:hover::before { opacity: 0.92; transform: translate3d(0,-1px,0); }
#screen-4 .e4-editorial-card:hover::after { opacity: 0.95; }
#screen-4 .e4-editorial-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0,0,0,0.06), 0 6px 18px rgba(0,0,0,0.035); border-color: rgba(0,0,0,0.14); }
#screen-4 .e4-ed-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 2px solid #111; margin-bottom: 22px; flex: 0 0 auto; min-width: 0; }
#screen-4 .e4-ed-num { font-family: 'Cormorant Garamond', serif; font-size: 16px; font-weight: 600; color: #111; letter-spacing: 0.1em; }
#screen-4 .e4-ed-tag { font-family: 'Inter', monospace; font-size: 9px; color: #666; text-transform: uppercase; letter-spacing: 0.25em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#screen-4 .e4-ed-title { font-family: 'Noto Serif SC', serif; font-size: clamp(31px, 2.15vw, 36px); font-weight: 600; color: #111; letter-spacing: 0.05em; margin-bottom: 14px; display: flex; align-items: center; gap: 0.03em; line-height: 1.12; flex: 0 0 auto; min-width: 0; }
#screen-4 .e4-title-lai-reader { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#screen-4 .e4-title-lai-svg { width: 0.92em; height: 1.06em; flex: 0 0 auto; display: block; overflow: visible; transform: translateY(0.035em); color: currentColor; }
#screen-4 .e4-title-lai-svg path { fill: none; stroke: currentColor; stroke-width: 2.45; stroke-linecap: square; stroke-linejoin: miter; vector-effect: non-scaling-stroke; shape-rendering: geometricPrecision; }
#screen-4 .e4-ed-title span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#screen-4 .e4-ed-desc { font-family: 'Noto Serif SC', serif; font-size: 14px; color: #555; line-height: 1.72; font-weight: 400; margin-bottom: 18px; flex: 1 1 auto; min-height: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
#screen-4 .e4-ed-bottom { position: relative; padding-top: 18px; display: flex; flex-direction: column; gap: 12px; flex: 0 0 auto; min-width: 0; }
#screen-4 .e4-ed-bottom::before { content: ''; position: absolute; top: 0; left: 0; width: 60%; height: 1px; background: linear-gradient(to right, rgba(0,0,0,0.12), rgba(0,0,0,0)); }
#screen-4 .e4-ed-keywords { display: flex; flex-wrap: wrap; gap: 6px; max-height: 54px; overflow: hidden; }
#screen-4 .e4-ed-kw { font-family: 'Inter', monospace; font-size: 10px; font-weight: 500; color: #111; background: rgba(0,0,0,0.04); padding: 6px 12px; letter-spacing: 0.1em; text-transform: uppercase; }
#screen-4 .e4-ed-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; margin-top: 2px; min-width: 0; }
#screen-4 .e4-ed-cta { font-family: 'Inter', monospace; font-size: 10px; color: #111; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#screen-4 .e4-ed-action-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; flex: 0 0 30px; color: #111; }
#screen-4 .e4-ed-action-icon svg { width: 30px; height: 30px; display: block; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; shape-rendering: geometricPrecision; transition: color 0.3s ease; }
#screen-4 .e4-ed-action-icon .icon-circle { stroke: currentColor; stroke-width: 1.15; fill: transparent; vector-effect: non-scaling-stroke; transition: fill 0.3s ease, stroke 0.3s ease; }
#screen-4 .e4-ed-action-icon .icon-arrow { stroke: currentColor; stroke-width: 1.45; vector-effect: non-scaling-stroke; transition: stroke 0.3s ease; }
#screen-4 .e4-editorial-card:hover .e4-ed-action-icon .icon-circle { fill: #111; }
#screen-4 .e4-editorial-card:hover .e4-ed-action-icon .icon-arrow { stroke: #fff; }
#screen-4 .e4-ed-bg-num { position: absolute; right: -10px; bottom: 100px; font-family: 'Cormorant Garamond', serif; font-size: 140px; font-weight: 700; color: rgba(0,0,0,0.03); line-height: 1; pointer-events: none; z-index: 0; transition: color 0.4s ease; }
#screen-4 .e4-editorial-card:hover .e4-ed-bg-num { color: rgba(0,0,0,0.06); }
#screen-4 .e4-ed-title,
#screen-4 .e4-ed-desc,
#screen-4 .e4-ed-bottom,
#screen-4 .e4-ed-header { position: relative; z-index: 3; }
#screen-4 .e4-bottom-bar {
  position: absolute; right: 4%; bottom: 4.5%;
  display: grid;
  grid-template-columns: auto repeat(3, minmax(132px, auto));
  align-items: stretch;
  z-index: 10; pointer-events: auto;
  background: linear-gradient(135deg, rgba(255,255,255,0.82) 0%, rgba(248,244,239,0.72) 100%);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 18px 36px rgba(0,0,0,0.06);
}
#screen-4 .e4-contact-head { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 20px 24px; border-right: 1px solid rgba(0,0,0,0.08); }
#screen-4 .e4-contact-kicker { font-family: 'Inter', monospace; font-size: 9px; color: #999; letter-spacing: 0.26em; text-transform: uppercase; }
#screen-4 .e4-contact-title { font-family: 'Noto Serif SC', serif; font-size: 20px; color: #222; letter-spacing: 0.08em; }
#screen-4 .e4-bottom-bar .contact-item { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; padding: 20px 24px; border-right: 1px solid rgba(0,0,0,0.08); text-decoration: none; transition: background 0.35s ease, transform 0.35s ease; }
#screen-4 .e4-bottom-bar .contact-item:last-child { border-right: none; }
#screen-4 .e4-bottom-bar .contact-item:hover { background: rgba(255,255,255,0.46); transform: translateY(-1px); }
#screen-4 .e4-bottom-bar .contact-label { font-family: 'Inter', monospace; font-size: 9px; color: #999; letter-spacing: 0.24em; text-transform: uppercase; }
#screen-4 .e4-bottom-bar .contact-value { font-family: 'Cormorant Garamond', serif; font-size: 24px; color: #1f1f1f; letter-spacing: 0.03em; text-decoration: none; font-weight: 600; transition: color 0.3s ease; }
#screen-4 .e4-bottom-bar .contact-item:hover .contact-value { color: #000; }

/* ========== 极小屏：隐藏次要装饰 ========== */
@media (max-width: 1200px) {
  #screen-4 .e4-decor-grid,
  #screen-4 .e4-horizontal-line,
  #screen-4 .e4-super-watermark { display: none !important; }
}

/* ========== 文字层按 draft 的 zoom 阶梯做响应式 ========== */
@media (max-width: 1440px), (max-height: 900px) { #screen-3 .content-box, #screen-4 .content-box { zoom: 0.92; } }
@media (max-width: 1320px), (max-height: 820px) { #screen-3 .content-box, #screen-4 .content-box { zoom: 0.85; } }
@media (max-width: 1200px), (max-height: 750px) { #screen-3 .content-box, #screen-4 .content-box { zoom: 0.78; } }
@media (max-width: 1080px), (max-height: 680px) { #screen-3 .content-box, #screen-4 .content-box { zoom: 0.70; } }
@media (max-width: 960px),  (max-height: 600px) { #screen-3 .content-box, #screen-4 .content-box { zoom: 0.50; } }

/* ========== 入场动画通用 ========== */
.anim-item { opacity: 0; transform: translateY(18px); will-change: transform, opacity, filter; }
.anim-item.fade-only { transform: none; }
.anim-item.from-left { transform: translateX(-28px); }
.anim-item.from-right { transform: translateX(28px); }
.anim-item.visible { opacity: 1; transform: none; transition: opacity 0.7s ease-out, transform 0.7s ease-out; transition-delay: calc(var(--stagger, 0) * 0.08s); }