/* 极光艺廊 · Aurora Artscape — 《迟到的光》 v2 design system
Light That Arrives Late.
Self-contained. v2 pages link ONLY this file; legacy pages keep
css/style.css untouched. Rollback = swap one <link>.
Governing ideas:
· Parallax depth = distance in TIME. The furthest layer moves least
because it is the oldest. Keep that relationship if you tune it.
· Nothing appears. Everything arrives.
· Pure white never appears — #EDE7D9 is 宣纸, not a screen.
· 朱砂 is spent once, on the seal. */
:root{
	--void:#05070C; --night:#0A0F1A; --slate:#141B2B;
	--aurora-teal:#3FE0C8; --aurora-violet:#7C6BFF; --aurora-jade:#5FE89B;
	--gold-leaf:#E8D08A; --gold:#C9A227; --gold-deep:#8A6D18;
	--rice:#EDE7D9; --rice-dim:#9A9584; --cinnabar:#C1362F;
	--t-xiangyu:#5E86B8; --t-yuefei:#8695A6; --t-libai:#D3DCEC; --t-zhuge:#D9A05B;
	--zh:"Noto Serif SC",serif;
	--lat:"Marcellus",Georgia,serif;
	--gar:"EB Garamond",Georgia,serif;
	--ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--void);color:var(--rice);font-family:var(--zh);font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:rgba(201,162,39,.28);color:var(--rice)}
img{max-width:100%;display:block}
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.035;mix-blend-mode:overlay}
.vignette{position:fixed;inset:0;z-index:89;pointer-events:none;background:radial-gradient(ellipse 130% 90% at 50% 42%,transparent 32%,rgba(5,7,12,.72) 100%)}
#aurora{position:fixed;inset:0;z-index:1;pointer-events:none;filter:blur(46px)}
#stars{position:fixed;inset:0;z-index:0;pointer-events:none}
header.site{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;padding:24px clamp(18px,4.5vw,64px);transition:background .8s var(--ease),backdrop-filter .8s var(--ease)}
header.site.settled{background:linear-gradient(180deg,rgba(5,7,12,.88),rgba(5,7,12,0));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.brand{display:flex;align-items:baseline;gap:13px;flex:0 0 auto;text-decoration:none}
.brand .zh{font-size:1.1rem;font-weight:300;letter-spacing:.34em;color:var(--rice);white-space:nowrap;margin-right:-.34em}
.brand .lat{font-family:var(--lat);font-size:.57rem;letter-spacing:.32em;color:var(--rice-dim);white-space:nowrap;text-transform:uppercase}
nav.site{display:flex;gap:clamp(14px,2.2vw,30px)}
nav.site a{font-family:var(--lat);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--rice-dim);text-decoration:none;padding-bottom:5px;position:relative;transition:color .6s var(--ease);white-space:nowrap}
nav.site a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:linear-gradient(90deg,var(--gold-deep),var(--gold-leaf),var(--gold-deep));transition:width .7s var(--ease)}
nav.site a:hover,nav.site a[aria-current]{color:var(--rice)}
nav.site a:hover::after,nav.site a[aria-current]::after{width:100%}
@media(max-width:820px){nav.site{display:none}}
main{position:relative;z-index:10}
section{padding:clamp(88px,16vh,190px) clamp(18px,6vw,90px);position:relative}
.wrap{max-width:1240px;margin:0 auto}
.eyebrow{font-family:var(--lat);font-size:.61rem;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);margin-right:-.42em}
.ridge{height:1px;border:0;margin:0;opacity:.62;background:linear-gradient(90deg,transparent,var(--gold-deep) 18%,var(--gold-leaf) 50%,var(--gold-deep) 82%,transparent)}
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-top:120px}
.hero h1{font-weight:200;letter-spacing:.34em;margin-right:-.34em;font-size:clamp(2.6rem,11.5vw,10.5rem);line-height:1.06;color:var(--rice)}
.sheen{background:linear-gradient(105deg,var(--rice) 0%,var(--rice) 38%,#FFF8E6 47%,var(--gold-leaf) 51%,var(--rice) 60%,var(--rice) 100%);background-size:280% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:silk 13s var(--ease) 2.4s infinite}
@keyframes silk{0%,72%{background-position:180% 0}100%{background-position:-80% 0}}
.hero .thesis{font-size:clamp(.9rem,1.6vw,1.16rem);font-weight:300;letter-spacing:.2em;margin-right:-.2em;color:var(--rice-dim);margin-top:32px}
.hero .thesis-en{font-family:var(--gar);font-style:italic;font-size:clamp(.88rem,1.4vw,1.06rem);color:var(--rice-dim);opacity:.72;margin-top:12px}
.hero .ridge{width:min(240px,42vw);margin:50px auto 0}
.scrollcue{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);font-family:var(--lat);font-size:.55rem;letter-spacing:.4em;color:var(--rice-dim);text-transform:uppercase;opacity:.5;display:flex;flex-direction:column;align-items:center;gap:10px}
.scrollcue i{display:block;width:1px;height:44px;background:linear-gradient(180deg,var(--gold),transparent);animation:drop 3.4s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.prose{max-width:820px}
.prose h2{font-weight:200;font-size:clamp(1.5rem,4vw,3.1rem);line-height:1.62;letter-spacing:.13em;margin:28px 0 0;color:var(--rice)}
.prose h2 em{font-style:normal;color:var(--gold-leaf)}
.prose p{font-family:var(--gar);font-size:1.05rem;line-height:1.95;color:var(--rice-dim);margin-top:28px;max-width:62ch}
.prose p.zh{font-family:var(--zh);font-size:1rem;line-height:2.1;letter-spacing:.06em}
.prose .ridge{width:120px;margin-top:44px}
.sec-head{display:flex;align-items:baseline;gap:20px;margin-bottom:70px;flex-wrap:wrap}
.sec-head h2{font-weight:200;font-size:clamp(1.4rem,3.4vw,2.5rem);letter-spacing:.3em;margin-right:-.3em}
.sec-head .lat{font-family:var(--lat);font-size:.64rem;letter-spacing:.32em;text-transform:uppercase;color:var(--rice-dim)}
.film{display:grid;grid-template-columns:1fr auto;gap:clamp(22px,5vw,72px);align-items:center;padding:clamp(34px,5vw,58px) 0;border-top:1px solid rgba(232,231,217,.07);position:relative}
.film:last-child{border-bottom:1px solid rgba(232,231,217,.07)}
.film.right{grid-template-columns:auto 1fr}
.film.right .film-body{order:2}
.film.right .rail{order:1}
.film::before{content:"";position:absolute;left:calc(-1 * clamp(18px,6vw,90px));top:0;bottom:0;width:2px;opacity:0;transition:opacity .9s var(--ease);background:linear-gradient(180deg,transparent,var(--temp),transparent)}
.film:hover::before{opacity:.85}
.film-body{max-width:66ch}
.film .no{font-family:var(--lat);font-size:.59rem;letter-spacing:.38em;color:var(--rice-dim);text-transform:uppercase;margin-right:-.38em}
.film h3{font-weight:200;font-size:clamp(1.8rem,5.4vw,3.9rem);letter-spacing:.2em;margin:15px 0 0;margin-right:-.2em;line-height:1.2;color:var(--rice);transition:color .9s var(--ease),text-shadow .9s var(--ease)}
.film:hover h3{color:var(--temp)}
.film .who{font-family:var(--gar);font-size:1rem;color:var(--rice-dim);margin-top:13px}
.film .when{font-size:.78rem;letter-spacing:.24em;color:var(--temp);margin-top:18px;opacity:.78;margin-right:-.24em}
.film .gloss{font-family:var(--gar);font-style:italic;font-size:1rem;line-height:1.85;color:var(--rice-dim);margin-top:20px;max-width:52ch}
.film .links{display:flex;gap:24px;margin-top:28px;flex-wrap:wrap}
.film .links a{font-family:var(--lat);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;color:var(--rice);position:relative;padding-bottom:5px;transition:color .6s var(--ease);margin-right:-.22em}
.film .links a.sub{color:var(--rice-dim)}
.film .links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;opacity:.28;transition:opacity .6s var(--ease)}
.film .links a:hover{color:var(--temp)}
.film .links a:hover::after{opacity:1}
.rail{writing-mode:vertical-rl;text-orientation:upright;font-size:clamp(1rem,2.5vw,1.9rem);font-weight:200;letter-spacing:.36em;line-height:1.9;color:var(--temp);opacity:.5;max-height:min(62vh,440px);align-self:center;transition:opacity .9s var(--ease),letter-spacing .9s var(--ease)}
.film:hover .rail{opacity:.95;letter-spacing:.44em}
@media(max-width:720px){
	.film,.film.right{grid-template-columns:1fr}
	.rail{writing-mode:horizontal-tb;text-orientation:mixed;letter-spacing:.2em;max-height:none;margin-top:24px;font-size:1.05rem}
	.film.right .film-body{order:1}
	.film.right .rail{order:2}
}
.scores{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:2px;background:rgba(232,231,217,.07);border:1px solid rgba(232,231,217,.07)}
.score{background:linear-gradient(165deg,rgba(20,27,43,.88),rgba(10,15,26,.94));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:clamp(28px,3.4vw,46px);position:relative;overflow:hidden;text-decoration:none;display:block;transition:background .9s var(--ease)}
.score::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;opacity:0;background:linear-gradient(90deg,transparent,var(--temp),transparent);transition:opacity .9s var(--ease)}
.score:hover{background:linear-gradient(165deg,rgba(26,34,52,.94),rgba(12,18,30,.96))}
.score:hover::after{opacity:.9}
.score .new{position:absolute;top:18px;right:18px;font-family:var(--lat);font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-leaf);border:1px solid var(--gold-deep);padding:5px 9px;margin-right:-.3em}
.score h4{font-weight:200;font-size:1.85rem;letter-spacing:.24em;margin-right:-.24em;color:var(--rice);transition:color .9s var(--ease)}
.score:hover h4{color:var(--temp)}
.score .en{font-family:var(--lat);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rice-dim);margin-top:13px}
.score .note{font-family:var(--gar);font-style:italic;font-size:.97rem;line-height:1.8;color:var(--rice-dim);margin-top:18px}
.score .meta{font-size:.72rem;letter-spacing:.2em;color:var(--rice-dim);margin-top:24px;opacity:.66}
.player{position:relative;width:100%;aspect-ratio:16/9;border:1px solid rgba(232,231,217,.1);background:#000;overflow:hidden}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.poem{display:flex;justify-content:center;gap:clamp(18px,3vw,40px);writing-mode:vertical-rl;text-orientation:upright;margin:0 auto;max-height:min(70vh,620px);font-weight:200;letter-spacing:.3em;line-height:2.2;font-size:clamp(1rem,2.1vw,1.6rem);color:var(--rice)}
.poem .line{opacity:.92}
@media(max-width:760px){
	.poem{writing-mode:horizontal-tb;text-orientation:mixed;flex-direction:column;max-height:none;gap:10px;letter-spacing:.14em;font-size:clamp(.86rem,3.6vw,1.15rem);text-align:center;line-height:2}
}
.translation{font-family:var(--gar);font-style:italic;font-size:1.04rem;line-height:1.95;color:var(--rice-dim);max-width:56ch;margin:0 auto}
.translation p+p{margin-top:18px}
.letter{text-align:center}
.letter-inner{max-width:660px;margin:0 auto}
.letter h2{font-weight:200;font-size:clamp(2rem,6vw,4.2rem);letter-spacing:.3em;margin-right:-.3em;margin-top:24px;color:var(--rice)}
.letter .promise{font-size:1rem;line-height:2.1;color:var(--rice-dim);margin-top:28px;letter-spacing:.08em}
.letter .promise-en{font-family:var(--gar);font-style:italic;font-size:.98rem;color:var(--rice-dim);opacity:.7;margin-top:10px}
.form{display:flex;margin-top:44px;border-bottom:1px solid rgba(232,231,217,.22);transition:border-color .8s var(--ease)}
.form:focus-within{border-color:var(--gold)}
.form input{flex:1;background:none;border:0;outline:none;color:var(--rice);font-family:var(--gar);font-size:1.04rem;padding:15px 4px;letter-spacing:.04em}
.form input::placeholder{color:var(--rice-dim);opacity:.55}
.form button{background:none;border:0;cursor:pointer;color:var(--gold-leaf);font-family:var(--lat);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;padding:0 4px 0 20px;margin-right:-.26em;transition:color .6s var(--ease)}
.form button:hover{color:var(--rice)}
.letter .said{margin-top:22px;font-size:.84rem;letter-spacing:.16em;color:var(--gold-leaf);min-height:1.2em;opacity:0;transition:opacity .8s var(--ease)}
.letter .said.on{opacity:1}
.letter .ridge{width:180px;margin:0 auto}
.door{text-align:center;padding-top:0}
.door .zh{font-size:.78rem;letter-spacing:.28em;color:var(--rice-dim);opacity:.6;margin-bottom:15px;margin-right:-.28em}
.door a{font-family:var(--lat);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--rice-dim);text-decoration:none;margin-right:-.3em;border-bottom:1px solid rgba(232,231,217,.16);padding-bottom:6px;transition:color .7s var(--ease),border-color .7s var(--ease)}
.door a:hover{color:var(--gold-leaf);border-color:var(--gold-deep)}
footer.site{border-top:1px solid rgba(232,231,217,.07);position:relative;z-index:10;padding:72px clamp(18px,6vw,90px) 58px;text-align:center}
.seal{margin:0 auto 32px;display:block;opacity:.9;transform:rotate(-1.4deg)}
footer.site .fine{font-size:.74rem;letter-spacing:.18em;color:var(--rice-dim);opacity:.6;line-height:2.1}
footer.site .fine a{color:var(--rice-dim);text-decoration:none;border-bottom:1px solid rgba(232,231,217,.2)}
footer.site .fine a:hover{color:var(--gold-leaf)}
.arrive{opacity:0;filter:blur(9px);transform:translateY(16px);transition:opacity 1.25s var(--ease),filter 1.25s var(--ease),transform 1.25s var(--ease);transition-delay:var(--d,0ms)}
.arrive.landed{opacity:1;filter:blur(0);transform:none}
@media(prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	.arrive{transition:opacity .2s linear;filter:none;transform:none}
	.sheen{animation:none}
	.scrollcue i{animation:none}
}

/* the 牌匾 — calligraphic signboard replacing the hero wordmark.
The h1 and its alt text stay, so search and screen readers still read 极光艺廊. */
.hero h1 .signboard{width:min(76vw,940px);height:auto;display:block;margin:0 auto;filter:drop-shadow(0 0 48px rgba(201,162,39,.22))}
@media(max-width:700px){.hero h1 .signboard{width:90vw}}