:root { color-scheme: light; --paper:#fff7e8; --ink:#302b24; --pad:clamp(24px,5.8vw,100px); }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; overflow:hidden; background:#8bafbf; color:var(--paper); font-family:"Microsoft YaHei","PingFang SC",sans-serif; }
button { font:inherit; cursor:pointer; }
button:focus-visible { outline:3px solid #ffda93; outline-offset:5px; }
[hidden] { display:none !important; }
#page { position:fixed; inset:0; overflow:hidden; }
.scene { position:absolute; inset:0; background:url('assets/campus-selected.jpg') center/cover; transition:transform 1.5s ease; transform-origin:76% 63%; }
#gl { display:block; width:100%; height:100%; touch-action:none; }
.shade { position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(16,28,25,.34),transparent 62%),linear-gradient(0deg,rgba(12,22,16,.55),transparent 65%); }
header { position:absolute; top:0; left:0; padding:30px var(--pad); pointer-events:none; }
.brand { font-family:Georgia,serif; font-size:26px; letter-spacing:-.04em; text-shadow:0 2px 12px #30413966; }
.brand-dot { color:#f7bf78; }
.hero { position:absolute; left:var(--pad); bottom:clamp(42px,10vh,110px); max-width:calc(100% - 2 * var(--pad)); transition:opacity .5s,transform .7s; }
.eyebrow { font-size:11px; letter-spacing:.22em; line-height:1.8; margin:0 0 18px; opacity:.8; }
h1 { font-family:"Songti SC","SimSun",serif; font-size:clamp(36px,4.1vw,64px); font-weight:400; letter-spacing:.04em; line-height:1.28; margin:0 0 20px; text-shadow:0 2px 24px #162d2d55; }
.title-dot { color:#f7cf9c; }
.lede { font-size:clamp(15px,1.2vw,18px); line-height:1.8; margin:0 0 30px; letter-spacing:.08em; opacity:.9; }
.ctas { display:flex; gap:14px; align-items:center; }
.cta,.secondary { min-height:48px; border-radius:999px; padding:0 25px; font-size:14px; letter-spacing:.06em; transition:background .25s,transform .25s,box-shadow .25s; }
.cta { background:var(--paper); color:var(--ink); border:1px solid var(--paper); box-shadow:0 5px 20px #10281c22; display:flex; align-items:center; gap:25px; }
.cta span { font-size:21px; line-height:1; }
.cta:hover { background:white; transform:translateY(-2px); box-shadow:0 8px 24px #10281c44; }
.secondary { background:rgba(23,40,30,.16); border:1px solid #fff7e86b; color:var(--paper); backdrop-filter:blur(9px); }
.secondary:hover { background:#fff7e826; transform:translateY(-2px); }
.near .scene { transform:scale(1.12); }
.opening { position:absolute; left:var(--pad); bottom:8vh; width:min(440px,calc(100% - 2 * var(--pad))); padding:28px; background:rgba(21,36,28,.82); border:1px solid #fff7e82e; border-radius:18px; backdrop-filter:blur(18px); }
h2 { font-family:"Songti SC","SimSun",serif; font-weight:400; font-size:26px; line-height:1.5; margin:0 0 20px; }
.opening p:not(.eyebrow),dialog p:not(.eyebrow) { font-size:15px; line-height:1.95; }
.opening .secondary { margin-top:12px; }
dialog { border:1px solid #fff7e899; border-radius:20px; padding:48px 36px 30px; width:min(510px,calc(100% - 40px)); max-height:calc(100dvh - 40px); color:var(--ink); background:#fff9ef; box-shadow:0 24px 100px #13211c55; }
dialog::backdrop { background:#12261b66; backdrop-filter:blur(7px); }
dialog .eyebrow { color:#80684a; }
.close { position:absolute; top:10px; right:14px; width:44px; height:44px; border:0; border-radius:50%; background:transparent; color:#6f695f; font-size:27px; }
.close:hover { background:#e9dfd0; }
dialog .note { border-top:1px solid #dfd4c3; padding-top:18px; color:#847965; font-size:13px !important; }
body.nogl #gl { display:none; }
@media(max-width:600px) { header { padding-top:25px; } .brand { font-size:24px; } .hero { bottom:max(48px,8dvh); } h1 { font-size:clamp(32px,8.5vw,46px); } .lede { font-size:14px; } .eyebrow { font-size:10px; } .cta,.secondary { padding:0 20px; font-size:13px; } .shade { background:linear-gradient(0deg,#0c2116b8,transparent 80%); } .opening { bottom:5dvh; padding:24px; } }
@media(max-height:500px) and (orientation:landscape) { header { padding-top:16px; } .hero { bottom:22px; } h1 { font-size:30px; margin-bottom:8px; } .eyebrow { margin-bottom:6px; } .lede { margin-bottom:14px; } .opening { bottom:15px; max-height:75dvh; overflow:auto; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; } }