/* ============================================================
   SCENES — 四章画面
   01 序章（深蓝 · 轨道与潮汐）
   02 作品（纸面 · 编辑部）
   03 观测（暗青 · 几何观测台）
   04 关于（暗金 · 档案）
   ============================================================ */

.scene{
  position:relative;
  min-height:calc(100svh - var(--top) - var(--foot));
  overflow:hidden;
}

.section-kicker{
  position:relative;
  display:flex;align-items:center;gap:12px;
  font:10.5px var(--mono);letter-spacing:2px;
}
.section-kicker>span:first-child{color:var(--red)}
.section-kicker i{display:block;width:38px;height:1px;background:currentColor;opacity:.45}

.scene-head{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;align-items:start}
.scene-head .section-kicker{grid-column:1/-1}
.scene-desc{
  align-self:center;justify-self:end;margin-top:32px;
  font-size:14px;line-height:1.9;letter-spacing:.6px;color:#52636b;
}
.page-title{
  position:relative;z-index:1;
  margin:22px 0 22px;
  font:500 clamp(42px,4.4vw,60px)/1.2 var(--sans);
  letter-spacing:7px;
}
.page-title-main{display:block;overflow:hidden;padding-top:8px;margin-top:-8px}
.page-title-main em{
  display:block;margin-top:12px;
  font:11px var(--mono);font-style:normal;letter-spacing:5px;color:#7a878c;
}
.title-dot{color:var(--red)}

/* ==================== 01 序章 ==================== */
.scene-home{
  display:flex;flex-direction:column;
  min-height:max(700px,calc(100svh - var(--top) - var(--foot)));
  padding:clamp(34px,5vh,78px) 4.8% 0;
  background:#101a21;
  --px:0;
  --py:0;
}
.home-field{position:absolute;inset:0;z-index:0;overflow:hidden}
.home-field::before{
  content:'';position:absolute;inset:-30%;
  background:
    radial-gradient(58% 54% at 72% 20%,#1d3a48 0%,transparent 62%),
    radial-gradient(48% 44% at 16% 80%,#4a1620 0%,transparent 66%),
    linear-gradient(155deg,#0b151d,#101b22 55%,#0a1218);
  transform:translate3d(calc(var(--px) * -12px),calc(var(--py) * -9px),0) scale(1.04);
  transition:transform 1s ease-out;
}
.home-field::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 50%,transparent 35%,#08121899 100%);
}
.home-grid{
  position:absolute;inset:-20%;z-index:0;
  background-image:
    linear-gradient(#cad5d90f 1px,transparent 1px),
    linear-gradient(90deg,#cad5d90f 1px,transparent 1px);
  background-size:78px 78px;
  transform:rotate(-18deg);
  animation:grid-drift 46s linear infinite alternate;
}
@keyframes grid-drift{to{transform:rotate(-13deg) translate3d(-38px,26px,0)}}

.ambient{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.65;pointer-events:none}

.home-shade{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg,#0b151dee 0%,#101b22b0 32%,#101a2233 66%,transparent 88%),
    linear-gradient(0deg,#101316 0%,transparent 42%,#10131622);
}
.home-orbits{
  position:absolute;right:4%;top:12%;z-index:3;
  width:43%;aspect-ratio:1;opacity:.7;
  transform:rotate(-20deg) translate3d(calc(var(--px) * 14px),calc(var(--py) * 10px),0);
  transition:transform 1.2s ease-out;
  pointer-events:none;
}
.home-orbits i{position:absolute;inset:0;border:1px solid #cbdce75c;border-radius:50%}
.home-orbits i:nth-child(2){inset:7%;border-style:dashed;border-color:#b8cfd433;animation:orbit-spin 90s linear infinite}
.home-orbits i:nth-child(3){inset:-3%;border-radius:0;border-width:1px 0;transform:rotate(35deg);opacity:.5}
.home-orbits>span{position:absolute;left:12%;top:9%;font-size:46px;color:var(--red);line-height:1;font-style:normal}
@keyframes orbit-spin{to{rotate:360deg}}

.home-red-plane{
  position:absolute;right:-8%;bottom:-22%;z-index:2;
  width:70%;height:50%;
  border-top:1px solid #f4435177;
  background:linear-gradient(150deg,#721a2d3d,transparent);
  transform:rotate(-28deg);
  pointer-events:none;
}
.home-watermark{
  position:absolute;right:-2%;bottom:-2%;z-index:1;
  font:600 clamp(58px,8.6vw,144px)/1 var(--sans);
  letter-spacing:-8px;color:#c3d3d70c;
  pointer-events:none;white-space:nowrap;
}
.home-coordinate{
  position:absolute;right:38px;top:28px;z-index:4;
  font:11px/1.7 var(--mono);letter-spacing:2px;text-align:right;color:#dadfdc;
}
.home-coordinate b{font-weight:400;color:#f0e4d6}
.home-coordinate span{display:block;font-size:9px;opacity:.55}

.home-body{position:relative;z-index:5;margin-top:auto;max-width:min(72%,900px)}
.home-eyebrow{margin:48px 0 14px;font-size:12px;letter-spacing:5px;color:#c5d0cf}
.home-title{
  font:400 clamp(48px,5.8vw,100px)/1.18 var(--serif);
  letter-spacing:-3px;color:#f0f0e9;
  text-shadow:0 3px 45px #08131b66;
}
.title-line{display:block;overflow:hidden;padding:9px 0 6px;margin-top:-9px}
.title-line>span{display:block}
.home-title .title-line:nth-child(2)>span{
  font:400 clamp(14px,1.7vw,23px)/1.7 var(--sans);
  letter-spacing:4px;color:#c3d1d2;
}
.home-title .ph{text-decoration-color:#ffffff3d;text-decoration-thickness:2px}

.home-caption{display:flex;align-items:flex-start;gap:20px;margin-top:20px}
.home-caption>i{flex:none;width:34px;height:1px;margin-top:11px;background:var(--red)}
.home-caption p{
  max-width:560px;padding:6px 10px;margin-left:-10px;
  font-size:15.5px;line-height:1.95;letter-spacing:1.2px;color:#b8c8ca;
  background:#0b151db3;
}
.home-body .cut-button{margin-top:30px;min-width:240px}

.home-bottom{
  position:relative;z-index:6;
  display:flex;align-items:center;gap:28px;
  max-width:min(66%,760px);margin-top:auto;
  padding:17px 0 26px;
  border-top:1px solid #cad8db29;
}
.home-bottom-number{font:italic 700 34px Georgia,var(--serif);letter-spacing:-3px;color:#b8c7c7}
.home-bottom>div{display:flex;flex-direction:column;gap:3px}
.home-bottom>div>span{font:9px var(--mono);letter-spacing:1.3px;color:#839a9f}
.home-bottom a{font-size:12.5px;letter-spacing:1px;transition:color .3s}
.home-bottom a:hover{color:#f49195}
.home-bottom-symbol{margin-left:auto;font-size:24px;color:var(--red);transition:transform .8s var(--ease)}
.home-bottom:hover .home-bottom-symbol{transform:rotate(180deg)}

.home-side-label{
  position:absolute;right:14px;top:45%;z-index:6;
  writing-mode:vertical-rl;
  font:9px var(--mono);letter-spacing:3px;color:#a3b6bd77;
}

/* ==================== 02 作品 ==================== */
.scene-works{
  padding:40px 4.8% 60px;
  background:var(--paper);
  background-image:linear-gradient(90deg,#1c252b07 1px,transparent 1px);
  background-size:60px 60px;
  color:#202529;
}
.scene-works .section-kicker{color:#52636b}
.scene-works .section-kicker>span:first-child{color:#a52f3f}
.scene-works .page-title{color:#1a2227}
.scene-works .page-title-main em{color:#52636b}
.scene-works .scene-head::after{
  content:'SELECTED';
  position:absolute;right:-2%;top:24px;
  font:600 clamp(50px,6.8vw,120px)/1 var(--sans);
  letter-spacing:-6px;color:transparent;
  -webkit-text-stroke:1px #5b686726;
  pointer-events:none;
}

.project-list{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;gap:34px 26px;
  margin-top:20px;
}
.project-card{position:relative;min-width:0}
.project-card.featured{
  grid-column:1/-1;
  display:grid;grid-template-columns:1.55fr 1fr;gap:30px;
  padding:24px 0;
  border-top:1px solid #1e2a3150;
  border-bottom:1px solid #1e2a3140;
}

/* 纯 CSS 图版 */
.plate{
  position:relative;display:block;width:100%;
  padding:0;overflow:hidden;isolation:isolate;
  background:#101316;
  text-align:left;
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%);
}
.plate img{width:100%;height:100%;object-fit:cover}
.project-visual{
  aspect-ratio:1.7;
  transition:transform .6s var(--ease),filter .6s var(--ease);
}
.project-visual:hover,.project-visual:focus-visible{
  transform:translateY(-4px);
  filter:saturate(1.08) contrast(1.03);
}

.plate-frame{
  position:absolute;inset:9px;z-index:6;
  border:1px solid #ffffff5a;
  opacity:0;transform:scale(1.1);
  transition:transform .8s var(--ease),opacity .8s var(--ease);
  pointer-events:none;
  clip-path:polygon(0 0,18% 0,18% 1px,1px 1px,1px 18%,0 18%,0 0,100% 100%,82% 100%,82% calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) 82%,100% 82%,100% 100%);
}
.project-visual:hover .plate-frame,
.project-visual:focus-visible .plate-frame,
.project-card:focus-within .plate-frame{opacity:1;transform:none}

.project-no{
  position:absolute;left:13px;top:11px;z-index:5;
  font:11px var(--mono);color:#fff;
  mix-blend-mode:difference;
  transition:transform .5s var(--ease),letter-spacing .5s var(--ease);
}
.project-visual:hover .project-no{transform:translateX(6px);letter-spacing:2px}

.project-view{
  position:absolute;right:0;bottom:0;z-index:5;
  display:flex;align-items:center;gap:28px;
  padding:11px 16px;
  background:#101316e6;color:#dfe7e4;
  font-size:11.5px;letter-spacing:1px;
  transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.project-view b{font:17px var(--mono);color:var(--red);font-weight:400}
.project-visual:hover .project-view,
.project-visual:focus-visible .project-view,
.project-card:focus-within .project-view{transform:none}

.project-info{padding:22px 0 0}
.featured .project-info{align-self:center;padding:0 16px 0 0}
.project-category{display:block;font:10px var(--mono);letter-spacing:1.5px;color:#47575f}
.project-info h3{margin:8px 0 12px}
.project-info h3 button{
  position:relative;display:block;width:100%;padding:0;
  text-align:left;
  font:600 clamp(24px,2.5vw,40px)/1.06 var(--sans);
  letter-spacing:-1.4px;color:#1a2227;
}
.project-info h3 button::after{
  content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .65s var(--ease);
}
.project-info h3 button:hover::after,
.project-info h3 button:focus-visible::after{transform:scaleX(1)}
.project-info h3 span{
  display:block;margin-top:11px;
  font:400 15px/1.8 var(--sans);letter-spacing:3px;color:#5d6d74;
}
.project-info>p{margin-top:13px;max-width:380px;font-size:14.5px;line-height:1.9;color:#48565e}
.project-meta{
  position:relative;
  display:flex;justify-content:space-between;gap:10px;
  margin-top:18px;padding-top:12px;
  border-top:1px solid #1e2a3126;
  font-size:11.5px;color:#5b6b72;
}
.project-meta::before{
  content:'';position:absolute;left:0;top:-1px;width:34px;height:1px;
  background:var(--red);transition:width .8s var(--ease);
}
.project-card:hover .project-meta::before{width:100%}
.project-meta>span:first-child{color:#8c303e}

.works-foot{
  position:relative;z-index:2;
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;
  margin-top:32px;padding-top:15px;
  border-top:1px solid #1e2a3126;
  font-size:11.5px;letter-spacing:.4px;color:#5b6b72;
}
.works-foot a{color:#8c303e;border-bottom:1px solid #8c303e55;padding-bottom:2px}
.works-foot a:hover{color:#1a2227}

/* ---- 五张纯 CSS 图版 ---- */
.art-1{
  background:
    radial-gradient(88% 120% at 82% 10%,#2c4d5c 0%,#17272f 42%,transparent 74%),
    radial-gradient(66% 88% at 10% 92%,#6d1f2b 0%,transparent 62%),
    linear-gradient(158deg,#0d171d,#121d24 58%,#0a1115);
}
.art-1::before{
  content:'';position:absolute;inset:0;
  background:
    repeating-linear-gradient(94deg,transparent 0 47px,#cfe0e310 47px 48px),
    radial-gradient(40% 60% at 60% 50%,#e7dfcb1a,transparent 70%);
}
.art-1::after{
  content:'';position:absolute;left:-12%;right:-12%;top:54%;height:1px;
  background:linear-gradient(90deg,transparent,#d24a5b 35%,#f5c3c8 50%,#d24a5b 65%,transparent);
  transform:rotate(-8deg);
  box-shadow:0 0 26px #ce3c4e66;
}

.art-2{
  background:
    radial-gradient(120% 120% at 88% 12%,#f3f4ee 0%,transparent 58%),
    linear-gradient(148deg,#e9eae3,#c9cfca 78%,#b3bab6);
}
.art-2::before{
  content:'';position:absolute;left:6%;top:12%;width:70%;height:120%;
  background:repeating-radial-gradient(circle at 22% 60%,transparent 0 27px,#1d2a3046 27px 28px);
  transform:rotate(-14deg);
}
.art-2::after{
  content:'';position:absolute;right:9%;top:0;bottom:0;width:9%;
  background:linear-gradient(#b03447,#8c2b3b);
  transform:skewX(-9deg);
  box-shadow:-18px 0 40px #7a243022;
}

.art-3{
  background:radial-gradient(70% 80% at 30% 46%,#1b333c 0%,#0d181d 68%,#0a1216);
}
.art-3::before{
  content:'';position:absolute;inset:-25% -10%;
  background:repeating-radial-gradient(ellipse at 32% 50%,transparent 0 38px,#c3d6dc46 38px 39px);
  transform:rotate(-20deg);
}
.art-3::after{
  content:'';position:absolute;left:62%;top:30%;
  width:10px;height:10px;border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 8px #ce3c4e22,0 0 34px 8px #ce3c4e55;
}

.art-4{
  background:linear-gradient(180deg,#182329,#0c1418);
}
.art-4::before{
  content:'';position:absolute;inset:-12% -20%;
  background:
    repeating-linear-gradient(90deg,#cfdde020 0 1px,transparent 1px 34px),
    repeating-linear-gradient(90deg,#0b141700 0 34px,#0b1417aa 34px 68px);
  transform:skewX(-10deg) scaleY(1.15);
}
.art-4::after{
  content:'';position:absolute;left:46%;top:-6%;bottom:-6%;width:2px;
  background:linear-gradient(#ce3c4e00,#ce3c4e,#f0b0b6,#ce3c4e00);
  box-shadow:0 0 24px #ce3c4e77;
}

.art-5{
  background:
    radial-gradient(80% 90% at 76% 78%,#4a3b1e 0%,transparent 62%),
    linear-gradient(150deg,#141c20,#1b2328 62%,#101719);
}
.art-5::before{
  content:'';position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg,#cfdde014 0 1px,transparent 1px 30px),
    repeating-linear-gradient(90deg,#cfdde014 0 1px,transparent 1px 30px);
}
.art-5::after{
  content:'';position:absolute;left:-30%;right:-30%;top:38%;height:22%;
  background:linear-gradient(90deg,transparent,#e6c98a55,#f4e2b766,#e6c98a55,transparent);
  transform:rotate(-24deg);
  filter:blur(1px);
}

/* ==================== 03 观测 ==================== */
.scene-studies{padding:40px 4.8% 32px;background:#11191d}
.scene-studies .section-kicker{color:#9babad}
.scene-studies .section-kicker>span:first-child{color:#e4848f}
.scene-studies .page-title{color:var(--paper)}
.scene-studies .page-title-main em{color:#93a7ac}
.scene-studies .scene-desc{color:#9babad}
.study-backdrop{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 85% 18%,#333b3e77,transparent 58%);
}

.study-tabs{
  position:relative;z-index:3;
  display:flex;margin:24px 0 30px;
  border-top:1px solid #bdcece44;border-bottom:1px solid #bdcece22;
}
.study-tabs button{
  position:relative;flex:1;padding:18px 0;
  overflow:hidden;isolation:isolate;
  text-align:left;
  font-size:13.5px;letter-spacing:2px;color:#b7c7ca;
  transition:color .3s;
}
.study-tabs button::before{
  content:'';position:absolute;inset:0 18% 0 0;z-index:-1;
  background:linear-gradient(90deg,#e1ecdf14,transparent);
  transform:translateX(-100%);
  transition:transform .7s var(--ease);
}
.study-tabs button:hover::before,
.study-tabs button:focus-visible::before,
.study-tabs button[aria-selected="true"]::before{transform:none}
.study-tabs button>span{
  display:inline-block;margin-right:18px;
  font:10.5px var(--mono);color:#93a8ad;
  transition:transform .6s var(--ease);
}
.study-tabs button:hover>span{transform:translateY(-3px)}
.study-tabs button[aria-selected="true"]{color:#fff}
.study-tabs button[aria-selected="true"]>span{color:#f08490}
.study-tabs button i{
  position:absolute;left:0;right:22%;bottom:0;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);
}
.study-tabs button[aria-selected="true"] i{transform:scaleX(1)}

.study-board{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.15fr 1fr;gap:38px;
  min-height:350px;
}
.study-art{
  position:relative;min-height:338px;overflow:hidden;
  border:1px solid #c5d6d329;
  background:#0e181d;
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%);
}
.study-art::after{
  content:'';position:absolute;inset:15px;z-index:5;
  border:1px solid #d5ded322;pointer-events:none;
}
.study-geometry{position:absolute;inset:0;z-index:3}
.study-geometry i{position:absolute;display:block}
.study-geometry>span{position:absolute;left:57%;top:23%;font-size:52px;color:var(--red);line-height:1;font-style:normal}
.study-red{position:absolute;z-index:3;display:block}

/* 三种观测构图 */
.study-art[data-kind="tidal"] .study-geometry i{
  left:18%;top:20%;width:88%;height:46%;
  border:1px solid #c9d6dc77;border-radius:50%;
  transform:rotate(-25deg);
  animation:tidal-drift 11s ease-in-out infinite alternate;
}
.study-art[data-kind="tidal"] .study-geometry i:nth-child(2){left:10%;top:29%;animation-delay:-3s}
.study-art[data-kind="tidal"] .study-geometry i:nth-child(3){left:2%;top:38%;animation-delay:-6s}
.study-art[data-kind="tidal"] .study-geometry i:nth-child(4){left:-6%;top:47%;animation-delay:-9s}
.study-art[data-kind="tidal"] .study-red{
  left:-10%;right:-10%;top:55%;height:1px;
  background:#ff485d;transform:rotate(-25deg);
}
@keyframes tidal-drift{to{transform:translate(9px,-10px) rotate(-19deg)}}

.study-art[data-kind="axis"] .study-geometry i{
  left:24%;top:8%;width:52%;height:78%;
  border:1px solid #c4d3dba3;
  border-radius:50% 50% 0 0;
  transform-origin:center bottom;
  animation:axis-fan 6s ease-in-out infinite alternate;
}
.study-art[data-kind="axis"] .study-geometry i:nth-child(1){margin-left:-26%;--r:-32deg}
.study-art[data-kind="axis"] .study-geometry i:nth-child(2){--r:-11deg;animation-delay:-1s}
.study-art[data-kind="axis"] .study-geometry i:nth-child(3){--r:11deg;animation-delay:-2s}
.study-art[data-kind="axis"] .study-geometry i:nth-child(4){--r:32deg;margin-left:26%;animation-delay:-3s}
.study-art[data-kind="axis"] .study-geometry>span{left:44%;top:41%;font-size:48px}
.study-art[data-kind="axis"] .study-red{
  left:46%;top:0;bottom:0;width:8%;
  background:linear-gradient(#691a2a00,#9d283466);
  border-left:1px solid #e8485c66;
}
@keyframes axis-fan{
  from{transform:rotate(var(--r,0deg)) scale(.94)}
  to{transform:rotate(calc(var(--r,0deg) + 7deg)) scale(1.04)}
}

.study-art[data-kind="light"] .study-geometry i{
  left:28%;top:6%;width:56%;height:92%;
  border:1px solid #e6cb8244;
  transform:rotate(45deg);
  animation:light-wave 10s ease-in-out infinite alternate;
}
.study-art[data-kind="light"] .study-geometry i:nth-child(2){left:18%;animation-delay:-2s}
.study-art[data-kind="light"] .study-geometry i:nth-child(3){left:38%;animation-delay:-4s}
.study-art[data-kind="light"] .study-geometry i:nth-child(4){left:48%;animation-delay:-6s}
.study-art[data-kind="light"] .study-geometry>span{left:62%;top:21%;color:#f2d394}
.study-art[data-kind="light"] .study-red{
  left:-10%;right:-10%;top:46%;height:2px;
  background:#e8c67566;transform:rotate(55deg);
}
@keyframes light-wave{to{transform:translateX(9%) rotate(33deg)}}

.study-no{
  position:absolute;left:21px;bottom:17px;z-index:4;
  font:200 96px/.8 var(--sans);letter-spacing:-8px;color:#e3e8e2b3;
}
.study-label{
  position:absolute;left:21px;top:17px;z-index:4;
  writing-mode:vertical-rl;
  font:9px var(--mono);letter-spacing:3px;color:#cbd8d9;
}
.study-art-caption{
  position:absolute;right:12px;bottom:11px;z-index:6;
  padding:4px 8px;
  background:#0d151aeb;border-left:1px solid #b5656d;
  font-size:10.5px;line-height:1.6;color:#dce5e3;
  pointer-events:none;
}

.study-content{align-self:center;min-height:318px;padding-right:10px}
.study-content h3{
  margin:8px 0 16px;
  overflow:hidden;padding-top:6px;
  font:400 33px var(--serif);letter-spacing:3px;color:#eef1ea;
}
.study-content>p{max-width:420px;font-size:15.5px;line-height:2;color:#a8babc}
.study-keywords{display:flex;flex-wrap:wrap;gap:20px;margin:22px 0 24px}
.study-keywords>span{
  position:relative;padding-bottom:7px;
  font-size:13.5px;letter-spacing:1px;color:#d3dedd;
}
.study-keywords>span::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:linear-gradient(90deg,#c54c5a88,transparent);
  transform-origin:left;
  animation:line-unfold .9s .5s var(--ease) both;
}
.study-keywords small{display:block;margin-bottom:4px;font:9.5px var(--mono);color:#93aeb4}
@keyframes line-unfold{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.study-source{
  padding-top:13px;border-top:1px solid #e9eeee1f;
  font-size:11.5px;color:#94acb2;
}
.study-source>span{font:9.5px var(--mono);letter-spacing:1.6px}
.study-source p{margin:5px 0 9px;font:11.5px/1.6 var(--mono);color:#c6d1d2}
.study-source a{
  display:inline-flex;align-items:center;min-height:31px;padding-bottom:2px;
  color:#d9c1b6;border-bottom:1px solid #d9c1b655;
  transition:color .3s,letter-spacing .4s;
}
.study-source a:hover{color:#fff;letter-spacing:1px}

.study-foot{
  position:relative;z-index:2;
  display:flex;justify-content:space-between;gap:20px;
  margin-top:30px;padding-top:17px;
  border-top:1px solid #e5f2ed22;
  font:9.5px var(--mono);letter-spacing:1px;color:#a0b2b6;
}
.study-foot>span:last-child{font:11.5px var(--sans);color:#c2cdd0}

/* ==================== 04 关于 ==================== */
.scene-about{
  display:grid;grid-template-columns:.82fr 1fr;gap:20px;
  min-height:max(720px,calc(100svh - var(--top) - var(--foot)));
  padding:48px 5% 52px;
  background:#181610;
}
.about-field-bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(70% 80% at 78% 22%,#4a3d22 0%,transparent 60%),
    radial-gradient(60% 70% at 12% 82%,#3a2c19 0%,transparent 65%),
    linear-gradient(150deg,#1b1811,#14130e 70%);
}
.about-field-bg::after{
  content:'';position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg,transparent 0 62px,#c8ab720b 62px 63px),
    repeating-linear-gradient(90deg,transparent 0 62px,#c8ab720b 62px 63px);
}
.about-vignette{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,#171816dd,#171816a8 48%,#17181633),
    linear-gradient(0deg,#171816,transparent 78%);
}
.about-connectors{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;overflow:visible;pointer-events:none;
}
.about-connectors path{
  fill:none;stroke:#d0b678;stroke-width:.7;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:0;opacity:.12;
}

.about-heading{position:relative;z-index:2}
.about-heading .section-kicker{color:#b9a880}
.about-heading .section-kicker>span:first-child{color:#d8b87b}
.about-heading .section-kicker::after{
  content:'';position:absolute;left:0;right:0;top:-16px;height:1px;
  background:linear-gradient(90deg,#c9af7366,transparent);
}
.about-prefix{display:block;margin-top:58px;font-size:15px;letter-spacing:5px;color:#bba77f}
.about-name{
  position:relative;margin:16px 0 10px;
  font:italic 700 clamp(58px,7vw,124px)/1.1 Georgia,var(--serif);
  letter-spacing:-5px;color:#e5ddcb;
}
.about-name .ph{text-decoration-color:#e5ddcb4d}
.about-star{
  position:absolute;top:4px;margin-left:12px;
  font:24px var(--sans);font-style:normal;letter-spacing:0;color:#c6aa71;
}
.about-tagline{font-size:16px;letter-spacing:4px;color:#c4b899}

.about-content{position:relative;z-index:2;align-self:center;padding:66px 0 0}
.about-intro{margin-bottom:30px;font-size:15.5px;line-height:2;color:#c8bda5}
.about-fields{border-top:1px solid #c6b07866}
.about-field{
  position:relative;
  display:grid;grid-template-columns:27px 1fr 20px;gap:7px 17px;
  padding:18px 0;
  border-bottom:1px solid #c6b07833;
}
.about-field::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,#c7a86114,transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .85s var(--ease);
}
.about-field:hover::before{transform:none}
.about-field>span{grid-row:1/3;padding-top:6px;font:10.5px var(--mono);color:#a79165}
.about-field h3{
  margin:0;font-size:17.5px;font-weight:400;letter-spacing:3px;color:#e7ddc9;
  transition:transform .6s var(--ease);
}
.about-field:hover h3{transform:translateX(6px)}
.about-field p{
  grid-column:2;display:flex;align-items:center;
  font-size:13.5px;line-height:1.7;color:#c2b8a2;
}
.about-field i{
  grid-column:3;grid-row:1/3;align-self:center;
  font:20px var(--mono);font-style:normal;color:#b89a65;
  transition:transform 1s var(--ease),color 1s;
}
.about-field:hover i{transform:rotate(180deg);color:#e3cb92}
.about-content .cut-button{margin-top:28px;min-width:240px}

.about-watermark{
  position:absolute;left:4%;bottom:30px;z-index:1;
  font:600 clamp(40px,6.4vw,96px)/.95 var(--sans);
  letter-spacing:-5px;color:#a791611c;pointer-events:none;
}

/* ==================== 场景响应式 ==================== */
@media (max-width:1200px){
  .home-title{font-size:clamp(44px,5.4vw,80px)}
  .home-body{max-width:82%}
  .home-bottom{max-width:72%}
  .home-orbits{width:50%;right:-4%}
  .project-card.featured{grid-template-columns:1.3fr 1fr;gap:22px}
  .project-info h3 button{font-size:clamp(23px,2.5vw,32px)}
  .study-board{gap:26px;grid-template-columns:1.05fr 1fr}
  .study-content h3{font-size:29px}
  .about-name{font-size:clamp(54px,6.6vw,104px)}
  .about-content{padding-top:50px}
}
@media (max-width:980px){
  .home-title{font-size:clamp(38px,6.2vw,62px)}
  .home-body{max-width:94%}
  .home-eyebrow{margin-top:38px;font-size:11px;letter-spacing:3px}
  .home-caption p{font-size:14px}
  .home-bottom{max-width:82%;margin-top:54px}
  .home-coordinate{right:22px;font-size:10px}
  .home-orbits{width:62%;right:-8%;top:19%}
  .home-side-label{display:none}
  .scene-works .scene-head::after{font-size:62px}
  .page-title{font-size:clamp(36px,5.2vw,46px);letter-spacing:5px}
  .scene-desc{font-size:13px}
  .project-card.featured{grid-template-columns:1fr;gap:18px;padding-top:18px}
  .featured .project-info{padding:0}
  .project-info h3 button{font-size:clamp(23px,3.3vw,29px)}
  .study-board{grid-template-columns:1fr;gap:26px}
  .study-art{min-height:298px}
  .study-content{min-height:0;padding-right:0}
  .study-content>p{max-width:none}
  .scene-about{grid-template-columns:1fr;padding-top:38px}
  .about-prefix{margin-top:32px;font-size:13px}
  .about-name{font-size:clamp(58px,11vw,110px);margin-top:8px}
  .about-tagline{font-size:14px}
  .about-content{padding-top:12px}
  .about-watermark{left:auto;right:2%;top:82px;bottom:auto;font-size:52px;writing-mode:vertical-rl}
  .about-connectors{display:none}
}
@media (max-width:680px){
  .scene{min-height:calc(100svh - 150px)}
  .scene-home{min-height:calc(100svh - 150px);padding:32px 21px 0}
  .home-shade{
    background:
      linear-gradient(90deg,#0b151dee,#0b151d77 52%,#0b151d22),
      linear-gradient(0deg,#101316 0%,transparent 52%);
  }
  .home-body{max-width:100%}
  .home-eyebrow{margin-top:32px;font-size:10px;letter-spacing:2px}
  .home-title{font-size:clamp(38px,10.5vw,60px);line-height:1.16;letter-spacing:-2px}
  .home-caption{gap:11px;margin-top:18px}
  .home-caption>i{width:18px;margin-top:10px}
  .home-caption p{font-size:13.5px;line-height:1.85;letter-spacing:.5px}
  .home-body .cut-button{margin-top:24px;min-width:0;min-height:50px;font-size:12px;padding:0 18px;gap:20px}
  .home-bottom{margin-top:34px;max-width:100%;gap:15px;padding:15px 0 22px}
  .home-bottom-number{font-size:26px}
  .home-orbits{top:33%;right:-22%;width:86%;opacity:.5}
  .home-red-plane{width:140%;height:28%;right:-38%;bottom:-12%}
  .home-watermark{font-size:60px;right:-6%;bottom:5%}
  .home-coordinate{right:16px;top:20px;font-size:9px}
  .home-coordinate span{display:none}

  .scene-works,.scene-studies{padding:30px 21px 36px}
  .scene-head{grid-template-columns:1fr}
  .scene-works .scene-head::after{font-size:52px;right:-14px;top:20px;letter-spacing:-3px}
  .page-title{font-size:clamp(34px,11vw,44px);letter-spacing:5px;margin:18px 0 0}
  .page-title-main em{font-size:8.5px;letter-spacing:3.6px;margin-top:9px}
  .scene-desc{justify-self:start;margin-top:18px;font-size:12.5px;line-height:1.85}
  .scene-desc br{display:none}
  .project-list{grid-template-columns:1fr;gap:28px;margin-top:24px}
  .project-card.featured{grid-column:auto}
  .project-info{padding-top:15px}
  .project-info h3 button{font-size:clamp(26px,7.6vw,32px)}
  .project-info h3 span{font-size:14px;margin-top:8px}
  .project-info>p{font-size:13.5px}
  .project-view{transform:none;font-size:10px;padding:8px 11px;gap:18px}
  .project-view b{font-size:14px}
  .project-no{font-size:10px}
  .project-category{font-size:9px;letter-spacing:1px}
  .works-foot{font-size:11.5px;margin-top:24px}
  .study-tabs{margin:22px 0 20px}
  .study-tabs button{font-size:13px;padding:15px 0;letter-spacing:0}
  .study-tabs button>span{display:block;margin:0 0 5px;font-size:9.5px}
  .study-tabs button i{right:12%}
  .study-art{min-height:284px}
  .study-no{font-size:72px;left:16px;bottom:15px}
  .study-art-caption{font-size:9.5px;right:9px;bottom:9px}
  .study-content h3{font-size:27px;margin:9px 0 15px}
  .study-content>p{font-size:14.5px}
  .study-keywords{gap:16px;margin:18px 0 20px}
  .study-foot{flex-direction:column;gap:6px;font-size:9px;margin-top:22px}
  .study-foot>span:last-child{font-size:11px}

  .scene-about{padding:30px 21px 38px;min-height:0}
  .about-prefix{margin-top:28px}
  .about-name{font-size:clamp(52px,16vw,92px);letter-spacing:-4px}
  .about-star{font-size:19px;margin-left:8px;top:-2px}
  .about-intro{font-size:13.5px;line-height:1.9;margin-bottom:22px}
  .about-field{padding:16px 0;grid-template-columns:20px 1fr 17px;gap:5px 10px}
  .about-field h3{font-size:16.5px}
  .about-field p{font-size:13px}
  .about-watermark{font-size:36px;right:12px;top:72px}
  .about-content .cut-button{margin-top:22px;min-width:0}
}