:root { --paper:#f7f2e9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#d8d3c9; font-family:"Noto Serif SC","Songti SC","STSong",serif; }
.page-shell { width:100%; max-width:640px; min-height:100vh; margin:0 auto; overflow:hidden; background:var(--paper); box-shadow:0 0 50px #0002; }
.hero { position:relative; min-height:620px; padding:54px 28px 38px; overflow:hidden; color:#fff; background:radial-gradient(circle at 86% 16%,#c98755 0 8%,transparent 8.2%),linear-gradient(146deg,#0a2d3a,#126372 69%,#e0a061); }
.hero::before,.hero::after { position:absolute; content:""; border:1px solid #ffffff45; border-radius:50%; }
.hero::before { width:345px; height:345px; right:-178px; top:75px; }
.hero::after { width:230px; height:230px; left:-138px; bottom:-115px; }
.eyebrow { position:relative; margin:0; color:#d9c6a8; font:500 11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.11em; }
.hero-mark { display:flex; gap:7px; position:absolute; top:142px; right:30px; align-items:end; height:88px; }
.hero-mark span { display:block; width:10px; background:#f6dbba; }
.hero-mark span:nth-child(1) { height:30px; }.hero-mark span:nth-child(2) { height:58px; }.hero-mark span:nth-child(3) { height:88px; }
h1 { position:relative; margin:164px 0 18px; font-size:clamp(46px,13vw,70px); line-height:1.18; letter-spacing:.09em; }
.hero-copy { position:relative; max-width:276px; margin:0; color:#e9f0ed; font-size:15px; line-height:1.9; }
.scroll-hint { position:absolute; z-index:1; bottom:33px; color:#fff; text-decoration:none; font:500 11px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; }
.scroll-hint span { padding-left:8px; font-size:17px; }
.art-section { margin:0; padding:0; line-height:0; background:var(--paper); }
.art-section img { display:block; width:100%; height:auto; }
.video-art { position:relative; width:100%; height:744px; background:#0b3540 url("./assets/images/spbj.png") center / 100% 100% no-repeat; }
.video-art video { position:absolute; top:30.2%; left:4.55%; width:91.4%; height:44.1%; margin:0; display:block; background:#000; object-fit:contain; }
@media (max-width:640px) { .video-art { height:116.6144vw; } }
@media (max-width:380px) { .hero { min-height:570px; padding-left:22px; } h1 { margin-top:150px; } }