@import url('fonts.css');
:root{--ink:#201a2b;--soft:#796780;--pink:#ff397d;--lime:#dcff6e;--blue:#6a69e8;--milk:#f4effa;--font:'Space Grotesk','Noto Sans SC','Microsoft YaHei',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:115px;overflow-x:clip}
body{margin:0;padding-top:100px;background:#eeecf6;color:var(--ink);font:16px var(--font);overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;cursor:pointer}
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
img{display:block;max-width:100%}
a:focus-visible,button:focus-visible{outline:3px solid var(--pink);outline-offset:5px}
::selection{background:var(--lime);color:var(--ink)}
.world{position:fixed;inset:0;z-index:-2;overflow:hidden;background:linear-gradient(115deg,#e8eafa,#f4e7f2 55%,#e6e2f5)}
.world-art{position:absolute;inset:-15%;background:url('assets/yearbook.2b66fd7c9b75.webp') center/cover;filter:blur(100px) saturate(1.25);opacity:.28}
.world-light{position:absolute;inset:0;background:radial-gradient(ellipse at 15% 10%,#c4c9ff44,transparent 45%),radial-gradient(ellipse at 80% 50%,#ffacd744,transparent 40%)}
.glass{background:linear-gradient(130deg,#ffffffa3,#ffffff38);border:1px solid #ffffffe6;backdrop-filter:blur(40px) saturate(1.65);-webkit-backdrop-filter:blur(40px) saturate(1.65);box-shadow:inset 0 1px 0 white,0 18px 60px #402c6c0b}
.page-progress{position:fixed;top:0;left:0;z-index:100;height:4px;width:calc(var(--page-progress,0)*100%);background:var(--pink)}
.nav{position:fixed;left:50%;top:18px;transform:translateX(-50%);width:calc(100% - 80px);max-width:1520px;height:70px;z-index:50;border-radius:14px;display:flex;align-items:center;justify-content:space-between;padding:0 25px}
.brand{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:700;letter-spacing:-.6px}
.brand>span{font-size:32px;color:var(--pink)}
.brand b{font-size:10px;background:var(--ink);color:white;border-radius:4px;padding:5px 6px;letter-spacing:1px}
.nav nav{display:flex;gap:30px;font-size:13px;font-weight:600}
.nav nav a{transition:color .2s}
.nav nav a:hover,.nav nav a.active{color:var(--pink)}
.nav-actions{display:flex;gap:7px}
.nav-actions button{width:37px;height:37px;border-radius:50%;background:#ffffff70;border:1px solid #fff;color:var(--pink);font-size:24px;line-height:1}
.nav-actions button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--lime)}
.hero{max-width:1520px;margin:0 auto;min-height:760px;height:calc(100svh - 100px);max-height:1050px;position:relative;isolation:isolate;padding:0 40px}
.hero:before{content:'';position:absolute;inset:0 -3% -40px;background:linear-gradient(90deg,#f2edfae8 5%,#efebfa66 48%,#dce7f322),url('assets/yearbook.2b66fd7c9b75.webp') center/cover;z-index:-2;mask-image:linear-gradient(black 80%,transparent);transform:translateY(calc(var(--hero-scroll,0)*100px))}
.hero-lines{position:absolute;inset:0;z-index:-1;opacity:.24;background-image:linear-gradient(#70648a22 1px,transparent 1px),linear-gradient(90deg,#70648a22 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(black,transparent)}
.hero-meta{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:600;letter-spacing:3px;padding-top:20px}
.hero-meta span:first-child{background:var(--pink);color:white;padding:5px 12px;transform:rotate(-3deg)}
.hero-copy{position:relative;padding-top:100px;z-index:5;max-width:55%;pointer-events:none}
.hero-copy a{pointer-events:auto}
.hero-year{position:absolute;top:7px;left:-7px;font-size:clamp(130px,16vw,245px);line-height:1;font-weight:700;letter-spacing:-14px;color:#ff397d;opacity:.18;z-index:-1}
.hero-year span{-webkit-text-stroke:1.2px var(--pink);color:transparent}
h1{font-size:clamp(95px,11.5vw,175px);line-height:.98;font-weight:900;letter-spacing:-9px;margin:0}
.hero-word{display:block;transform-origin:left center}
.hero-word.outlined{-webkit-text-stroke:2px var(--ink);color:transparent;position:relative;margin-left:65px}
.hero-word .spark{-webkit-text-stroke:0;color:var(--pink);font-size:65px;position:absolute;margin:0 0 0 20px;animation:spark-spin 18s linear infinite}
.hero-quote{font-size:33px;font-weight:600;line-height:1.3;margin:35px 0}
.hero-quote strong{color:var(--pink);font-weight:900}
.round-link{height:65px;width:65px;border:1px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;transition:background .3s,color .3s}
.round-link>span{font-size:35px;line-height:1}
.round-link:hover{background:var(--ink);color:var(--lime)}
.round-link svg{position:absolute;inset:-8px;width:80px;height:80px;fill:none;stroke:var(--pink);stroke-width:1;stroke-dasharray:45 250;animation:spark-spin 4s linear infinite}
.hero-deck{position:absolute;right:1%;top:12%;width:53%;height:78%;perspective:1200px;z-index:3}
.hero-poster{position:absolute;width:36%;aspect-ratio:2/3;padding:7px;border-radius:9px;box-shadow:0 30px 60px #33224436;background:#fff;transform-origin:center 80%;will-change:transform}
.hero-poster img{width:100%;height:100%;aspect-ratio:2/3;object-fit:contain;border-radius:3px}
.hero-poster:nth-child(1){left:1%;top:12%;transform:translate3d(calc(var(--hero-scroll,0)*-110px),calc(var(--hero-scroll,0)*120px),0) rotate(-16deg)}
.hero-poster:nth-child(2){left:32%;top:0;z-index:2;transform:translate3d(0,calc(var(--hero-scroll,0)*-60px),80px) rotate(6deg)}
.hero-poster:nth-child(3){left:65%;top:20%;transform:translate3d(calc(var(--hero-scroll,0)*140px),calc(var(--hero-scroll,0)*80px),0) rotate(19deg)}
.hero-poster button{position:absolute;inset:0;opacity:0}
.hero-deck:after{content:'好玩！';position:absolute;bottom:5%;left:11%;font-size:38px;font-weight:900;padding:10px 22px;background:var(--lime);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);transform:rotate(-9deg);z-index:5}
.hero-base{position:absolute;left:40px;right:40px;bottom:18px;border-top:1px solid #66517733;padding-top:17px;display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:2px}
.scroll-meter{width:85px;height:3px;background:#37234322;overflow:hidden}
.scroll-meter i{display:block;width:25%;height:100%;background:var(--pink);animation:scroll-cue 2s ease infinite}
.section{max-width:1480px;margin:0 auto;padding:110px 55px;position:relative;isolation:isolate}
.section-title{display:flex;align-items:baseline;gap:30px;margin-bottom:65px;position:relative}
.section-index{font-size:15px;font-weight:600;color:var(--pink);border-top:2px solid var(--pink);padding-top:14px;min-width:35px}
.section-title h2{font-size:clamp(55px,6.2vw,92px);line-height:1.12;letter-spacing:-4px;font-weight:900;margin:0}
.accent{color:var(--pink)}
.section-arrow{font-size:75px;color:var(--pink);margin-left:auto;line-height:1;animation:arrow-cue 2.2s ease infinite}
.kinetic-title .letter{display:inline-block;will-change:transform;white-space:pre}
.story{position:relative;padding:70px 0 110px;border-top:1px solid #8f749626;--entry:1;--exit:0;--drift:0px;isolation:isolate}
.story:before{content:attr(data-number);position:absolute;right:-8px;top:3px;font-size:240px;font-weight:700;line-height:1;color:#ffffff88;letter-spacing:-15px;z-index:-1;transform:translateY(calc(var(--exit)*-45px))}
.story-heading{display:flex;align-items:baseline;gap:20px;margin-bottom:38px}
.story-heading>span{font-size:11px;color:var(--pink);letter-spacing:1px}
.story-heading h3{font-size:clamp(42px,4.9vw,72px);line-height:1.15;letter-spacing:-2.5px;font-weight:900;margin:0}
.story-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:85px;align-items:start}
.story.even .story-layout{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.story.even .visual-stack{order:2}
.visual-stack{position:sticky;top:145px;padding:10px 30px 35px;min-height:520px;perspective:1200px}
.art-stack{position:relative;height:450px;max-width:390px;margin:auto;isolation:isolate}
.stack-poster{position:absolute;top:10px;left:50%;height:95%;aspect-ratio:2/3;padding:6px;border:1px solid #fff;border-radius:7px;background:#ffffffaa;box-shadow:0 25px 50px #40214b25;transform-origin:center 80%;will-change:transform;overflow:hidden}
.stack-poster img{width:100%;height:100%;object-fit:contain;aspect-ratio:2/3;border-radius:3px}
.stack-poster:nth-child(1){z-index:3;transform:translate3d(calc(-50% + (1 - var(--entry))*-140px),var(--drift),45px) rotate(calc(-4deg + (1 - var(--entry))*-12deg + var(--exit)*5deg));opacity:calc(.3 + .7*var(--entry))}
.stack-poster:nth-child(2){z-index:2;transform:translate3d(calc(-50% + 70px + (1 - var(--entry))*180px),calc(30px - var(--drift)),0) rotate(calc(12deg + (1 - var(--entry))*18deg + var(--exit)*-7deg))}
.stack-poster:nth-child(3){z-index:1;transform:translate3d(calc(-50% - 65px + (1 - var(--entry))*-100px),calc(25px + var(--drift)),0) rotate(calc(-15deg + (1 - var(--entry))*-15deg))}
.visual-stack:before{content:'';position:absolute;inset:20% -10% 5%;background:radial-gradient(ellipse,var(--tone,#e39bc4),transparent 65%);filter:blur(28px);opacity:.45;z-index:-1}
.visual-stack .stack-badge{position:absolute;right:-10px;bottom:10px;z-index:5;font-size:clamp(21px,2.5vw,37px);font-weight:900;background:#ffffff8a;padding:14px 20px;backdrop-filter:blur(35px) saturate(1.6);-webkit-backdrop-filter:blur(35px) saturate(1.6);border:1px solid #fff;box-shadow:inset 0 1px 0 #fff,5px 5px 0 #ff397d66;transform:rotate(-6deg);max-width:90%;line-height:1.4;color:var(--pink)}
.story-text{font-size:23px;line-height:1.95;letter-spacing:.1px;padding:15px 25px 15px 32px;position:relative;color:#382c40;background:linear-gradient(90deg,#ffffff85,#ffffff0);border-left:1px solid #fff;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.story-text p{margin:0 0 30px}
.story-text p:last-child{margin-bottom:0}
.story.short .story-layout{align-items:center}
.story.short .visual-stack{position:relative;top:auto}
.story.short .story-text{font-size:34px;line-height:1.85;padding-top:15px}
.story-text strong{font-weight:800;color:var(--ink);background:linear-gradient(transparent 70%,#ff73a32b 70%)}
.integrated-stream{position:absolute;overflow:hidden;pointer-events:none;z-index:0;user-select:none;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.integrated-stream .bullet-line{position:absolute;left:0;display:flex;gap:55px;white-space:nowrap;animation:bullet-glide var(--duration,32s) linear infinite;animation-delay:var(--delay,0s);width:max-content}
.integrated-stream .bullet-line:nth-child(2){top:58%;animation-direction:reverse}
.integrated-stream span{display:inline-block;font-weight:900;font-size:clamp(26px,3.5vw,52px);line-height:1.2;color:#ff397d55;letter-spacing:3px}
.integrated-stream span:nth-child(2n){-webkit-text-stroke:1px #7763ab99;color:transparent}
.hero-bullets{left:35%;right:-12%;height:200px;top:4%;z-index:4;transform:rotate(-8deg)}
.hero-bullets span{font-size:32px;color:#fff9;text-shadow:0 2px 0 #ff397d55}
.story-stream{inset:15px -12% auto;height:160px;transform:rotate(-4deg);z-index:-1;opacity:.7}
.story-stream .bullet-line:nth-child(2){display:none}
.visual-stream{inset:auto -20% -15px;height:110px;z-index:4;transform:rotate(5deg)}
.visual-stream span{font-size:24px;color:var(--pink);text-shadow:2px 2px #fff}
.visual-stream .bullet-line:nth-child(2){display:none}
.bullets-off .bullet-line{animation-play-state:paused;opacity:0;transition:opacity .25s}
.awards{padding-top:80px}
.best-year{display:grid;grid-template-columns:1fr 1.1fr;gap:65px;position:relative;align-items:center;padding:20px 0 80px}
.best-art{height:610px;position:relative;perspective:1000px}
.best-art .poster-surface{height:90%;aspect-ratio:2/3;margin:auto;position:relative;padding:8px;border-radius:8px;transform:rotate(-6deg);box-shadow:0 35px 75px #5d315a33}
.poster-surface img{width:100%;height:100%;object-fit:contain;aspect-ratio:2/3;border-radius:3px}
.best-art:before{content:'BEST';position:absolute;left:-15px;top:25px;font-size:clamp(90px,12vw,170px);line-height:1;letter-spacing:-10px;font-weight:700;color:#ff397d2b;transform:rotate(-90deg);transform-origin:center}
.best-copy{position:relative;z-index:3}
.best-copy .award-eyebrow{color:var(--pink);font-size:18px;font-weight:800;letter-spacing:4px}
.best-copy h3{font-size:clamp(65px,7vw,100px);margin:15px 0 30px;letter-spacing:-5px;line-height:1.1}
.best-copy blockquote{font-size:36px;line-height:1.55;font-weight:800;margin:0 0 25px}
.best-copy p{font-size:22px;line-height:1.9;margin:0 0 20px;max-width:600px}
.icon-link{display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid #b8a3c5;border-radius:50%;height:55px;width:55px;font-size:28px;transition:.3s}
.icon-link:hover{background:var(--pink);color:white;border-color:var(--pink)}
.award-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:45px 25px}
.award-tile{position:relative;text-align:left;background:none;padding:0;transform-origin:center bottom}
.award-tile .award-art{width:100%;aspect-ratio:2/3;padding:7px;border-radius:8px;overflow:hidden;position:relative;background:linear-gradient(140deg,#ffffffb8,#ffffff25);border:1px solid #fff;box-shadow:0 18px 40px #62436b18;backdrop-filter:blur(35px);-webkit-backdrop-filter:blur(35px);transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.award-art img{height:100%;width:100%;object-fit:contain;aspect-ratio:2/3;border-radius:3px}
.award-tile:hover .award-art{transform:translateY(-10px) rotate(-2deg);box-shadow:0 30px 50px #62436b30}
.award-tile:nth-child(even):hover .award-art{transform:translateY(-10px) rotate(2deg)}
.award-label{font-size:24px;font-weight:900;margin:18px 0 8px;display:flex;justify-content:space-between;align-items:center}
.award-label span{font-weight:400;font-size:24px;color:var(--pink)}
.award-quote{font-size:17px;line-height:1.65;color:#6e587c;margin:0}
.awards-bullets{inset:auto -5% -25px;height:140px;z-index:-1;transform:rotate(-4deg)}
.tier{padding-top:70px}
.tier-row{display:grid;grid-template-columns:110px 1fr;gap:30px;padding:35px 0;border-top:1px solid #a48bb133;position:relative;isolation:isolate}
.tier-stream{left:45%;right:-5%;top:30px;height:180px;transform:rotate(-8deg);z-index:-1;opacity:.6}
.character-stream{inset:10% 0 auto;height:150px;transform:rotate(-5deg);opacity:.4}
.tier-mark{position:sticky;top:135px;height:fit-content}
.tier-mark b{display:block;font-size:110px;line-height:1;font-weight:700;color:var(--rank);letter-spacing:-5px;text-shadow:1px 1px 0 #fff}
.tier-mark span{display:block;font-size:10px;margin-top:15px;color:#8e7b9b;letter-spacing:2px}
.tier-covers{display:flex;flex-wrap:wrap;gap:22px 15px;align-items:start}
.tier-tile{background:none;padding:0;width:clamp(100px,9.1vw,138px);text-align:left;position:relative;perspective:700px}
.tier-art{width:100%;aspect-ratio:2/3;padding:4px;background:#ffffffb0;border:1px solid white;border-radius:5px;box-shadow:0 9px 20px #402c5b18;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.tier-art img{height:100%;width:100%;object-fit:contain;aspect-ratio:2/3;border-radius:2px}
.tier-tile:hover .tier-art{transform:translateY(-10px) rotateY(-12deg) rotate(-2deg)}
.tier-tile>span{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:10px;margin-top:10px;color:#796185}
.characters{padding-top:65px}
.characters .section-title{margin-bottom:35px}
.character-stage{position:relative;overflow-x:auto;overflow-y:hidden;margin:0 -20px;padding:30px 20px 25px;scrollbar-width:thin}
.character-canvas{position:relative;min-width:950px;aspect-ratio:1.977;isolation:isolate}
.character-canvas:before{content:'LOVE';position:absolute;right:0;bottom:0;font-size:200px;line-height:.8;letter-spacing:-10px;font-weight:700;color:#ff397d12;z-index:-1}
.character-point{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);padding:0;background:none;transform-origin:center bottom;transition:filter .35s;z-index:var(--paint);will-change:transform}
.character-point img{height:100%;width:100%;object-fit:contain;filter:drop-shadow(0 12px 12px #44315b1c);mix-blend-mode:multiply;transition:transform .4s cubic-bezier(.2,.8,.2,1);transform-origin:bottom}
.character-point.generated img{mix-blend-mode:normal}
.character-point:hover{z-index:60}
.character-point:hover img{transform:translateY(-12px) scale(1.08);filter:drop-shadow(0 15px 20px #ff397d50)}
.character-rank{position:absolute;left:0;bottom:0;background:#ffffff9c;border:1px solid #fff;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);padding:5px 9px;line-height:1.1;border-radius:4px;font-size:clamp(8px,1vw,14px);font-weight:700;color:var(--pink);box-shadow:2px 2px 0 #ff397d33;opacity:.85}
.character-point[data-rank="1"] .character-rank{font-size:30px;padding:8px 16px;color:var(--ink);background:var(--lime);border-color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.character-ruler{display:flex;align-items:center;gap:15px;font-size:10px;color:#a58db0;padding-top:20px}
.character-ruler i{flex:1;height:2px;background:#b6a2c533;position:relative;overflow:hidden}
.character-ruler i:after{content:'';position:absolute;inset:0 auto 0 0;width:calc(15% + var(--character-progress,0)*85%);background:var(--pink)}
.character-scroll-controls{display:none;gap:7px}
.character-ruler.is-scrollable .character-scroll-controls{display:flex}
.character-scroll-controls button{height:34px;width:34px;border:1px solid #fff;border-radius:50%;background:#ffffff88;backdrop-filter:blur(25px);font-size:20px;line-height:1}
.character-scroll-controls button:disabled{opacity:.3;cursor:default}
.character-ruler b{font-size:20px;color:var(--pink);animation:heartbeat 2.2s ease infinite}
.next{padding-top:100px;text-align:center;overflow:hidden}
.next-year{position:absolute;font-size:clamp(150px,28vw,420px);font-weight:700;line-height:1;letter-spacing:-20px;color:#fff9;top:45px;left:0;right:0;z-index:-1}
.next h2{font-size:clamp(70px,9vw,135px);line-height:1.05;letter-spacing:-5px;font-weight:900;margin:20px 0}
.next>p{font-size:27px;line-height:1.7;margin:30px 0 55px}
.next-covers{display:flex;flex-wrap:wrap;justify-content:center;gap:20px 14px;max-width:1150px;margin:0 auto 60px}
.next-cover{padding:4px;border:1px solid white;background:#ffffff9a;border-radius:4px;width:100px;aspect-ratio:2/3;box-shadow:0 10px 20px #4221561c;transition:transform .3s;transform:rotate(var(--angle))}
.next-cover img{width:100%;height:100%;object-fit:contain;aspect-ratio:2/3;border-radius:2px}
.next-cover:hover{transform:translateY(-15px) rotate(0);z-index:2}
.next .round-link{margin:auto}
footer{display:flex;justify-content:space-between;align-items:center;margin:0 55px;padding:35px 0;border-top:1px solid #b9a3c540;font-size:12px;color:#8f7c9b}
footer strong{font-size:16px;color:var(--ink);letter-spacing:5px}
footer a{font-size:25px;color:var(--pink)}
.chapter-progress{position:fixed;right:18px;top:50%;display:flex;flex-direction:column;gap:13px;z-index:20;transform:translateY(-50%)}
.chapter-progress a{height:14px;width:14px;display:flex;align-items:center;justify-content:center}
.chapter-progress i{height:5px;width:5px;background:#9680a257;border-radius:50%;transition:.3s}
.chapter-progress a.active i{height:10px;width:10px;background:var(--pink);box-shadow:0 0 0 5px #ff397d16}
.cursor-halo{pointer-events:none;position:fixed;width:200px;height:200px;border-radius:50%;background:radial-gradient(#ff9dc21c,transparent 65%);left:var(--mouse-x,-300px);top:var(--mouse-y,-300px);transform:translate(-50%,-50%);z-index:0}
dialog{max-width:980px;width:calc(100% - 40px);max-height:88svh;padding:45px;border:1px solid #fff;border-radius:18px;background:linear-gradient(130deg,#ffffffdb,#f3e9f7db);color:var(--ink);backdrop-filter:blur(50px) saturate(1.4);-webkit-backdrop-filter:blur(50px) saturate(1.4);box-shadow:0 40px 100px #25133155;overscroll-behavior:contain}
dialog::backdrop{background:#28172b77;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.close{position:absolute;right:13px;top:12px;width:36px;height:36px;background:#fff9;border-radius:50%;font-size:27px;z-index:3}
dialog h2{font-size:42px;line-height:1.2;margin:15px 0 30px;font-weight:900}
.dialog-art{height:55svh;max-width:100%;width:fit-content;margin:0 auto 25px;aspect-ratio:2/3}
.dialog-art img{width:100%;height:100%;object-fit:contain;aspect-ratio:2/3}
.dialog-text{font-size:21px;line-height:2;white-space:pre-line}
.dialog-kicker{font-size:12px;letter-spacing:2px;color:var(--pink)}
.art-note{text-align:center;font-size:12px;color:var(--soft);margin:-12px 0 25px}
.modal-open{overflow:hidden!important}
.reveal-ready{opacity:0;translate:0 35px;transition:opacity .8s,translate .9s cubic-bezier(.2,.8,.2,1)}
.reveal-ready.in-view{opacity:1;translate:0 0}
.art-reveal{opacity:0;translate:calc(var(--side,1)*65px) 50px;rotate:calc(var(--side,1)*8deg);scale:.88;transition:opacity .8s var(--stagger,0ms),translate 1s cubic-bezier(.15,.8,.15,1) var(--stagger,0ms),rotate 1.1s var(--stagger,0ms),scale 1.1s var(--stagger,0ms)}
.art-reveal.in-view{opacity:1;translate:0 0;rotate:0deg;scale:1}
.reduced-motion{scroll-behavior:auto!important}
.reduced-motion *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.reduced-motion .reveal-ready,.reduced-motion .art-reveal{opacity:1;translate:0 0;rotate:0deg;scale:1}
.reduced-motion .hero:before{transform:none}
.reduced-motion .hero-poster{--hero-scroll:0!important}
.reduced-motion .stack-poster{--entry:1!important;--exit:0!important;--drift:0px!important}
.reduced-motion .cursor-halo{display:none}
.reduced-motion .bullet-line{animation:none;opacity:.35}
.reduced-motion .integrated-stream{display:none}

@keyframes spark-spin{to{transform:rotate(360deg)}
}
@keyframes scroll-cue{0%{transform:translateX(-100%)}
100%{transform:translateX(420%)}
}
@keyframes arrow-cue{0%,100%{transform:translate(0,0)}
50%{transform:translate(6px,6px)}
}
@keyframes bullet-glide{from{transform:translateX(15%)}
to{transform:translateX(-65%)}
}
@keyframes heartbeat{0%,100%{transform:scale(1)}
15%{transform:scale(1.3)}
30%{transform:scale(1)}
45%{transform:scale(1.15)}
}

@media(min-width:1650px){.hero{padding:0 0}
.hero-meta{padding-top:30px}
.hero-base{left:0;right:0}
.hero-copy{padding-top:110px}
.hero-deck{right:0}
}

@media(max-width:1100px){.nav{width:calc(100% - 40px);padding:0 18px}
.nav nav{gap:20px;font-size:12px}
.hero{padding:0 30px;min-height:700px}
.hero-copy{padding-top:110px}
.hero-year{font-size:170px;top:25px}
h1{font-size:120px;letter-spacing:-7px}
.hero-word.outlined{margin-left:35px}
.hero-quote{font-size:29px}
.hero-deck{top:24%;height:65%;right:1%}
.hero-deck:after{font-size:28px;bottom:5%}
.hero-base{left:30px;right:30px}
.section{padding:90px 35px}
.section-title{gap:20px;margin-bottom:50px}
.section-title h2{font-size:65px}
.story-layout,.story.even .story-layout{gap:42px;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.story.even .story-layout{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.visual-stack{min-height:440px;padding:10px 18px 40px;top:135px}
.art-stack{height:365px}
.story-text{font-size:21px;padding-left:23px;padding-right:5px}
.story.short .story-text{font-size:27px;padding-top:35px}
.story-heading h3{font-size:55px}
.best-year{gap:35px}
.best-art{height:490px}
.best-copy h3{font-size:75px}
.best-copy blockquote{font-size:29px}
.best-copy p{font-size:20px}
.award-grid{gap:35px 20px}
.award-label{font-size:21px}
.award-quote{font-size:15px}
.tier-row{grid-template-columns:80px 1fr;gap:20px}
.tier-mark b{font-size:88px}
.tier-tile{width:112px}
.next-cover{width:90px}
.chapter-progress{right:7px}
}

@media(max-width:699px){body{padding-top:80px}
html{scroll-padding-top:100px}
.nav{top:10px;width:calc(100% - 28px);height:58px;padding:0 13px;border-radius:12px}
.brand{font-size:12px;gap:6px}
.brand>span{font-size:26px}
.brand b{font-size:8px;padding:4px}
.nav nav{gap:0}
.nav nav a{display:none}
.nav-actions{gap:5px}
.nav-actions button{width:31px;height:31px;font-size:20px}
.hero{padding:0 22px;min-height:1060px;height:calc(100svh + 240px);max-height:1180px}
.hero-meta{padding-top:16px;font-size:8px;letter-spacing:2px}
.hero-copy{padding-top:90px;max-width:100%}
.hero-year{font-size:145px;top:20px;left:-3px;letter-spacing:-9px}
h1{font-size:clamp(100px,26vw,145px);letter-spacing:-7px}
.hero-word.outlined{margin-left:35px;margin-top:5px;-webkit-text-stroke:1.5px var(--ink)}
.hero-word .spark{font-size:42px;margin-left:15px;top:5px}
.hero-quote{font-size:26px;margin:25px 0}
.round-link{width:53px;height:53px}
.round-link>span{font-size:30px}
.round-link svg{width:67px;height:67px;inset:-8px}
.hero-deck{width:100%;height:400px;top:560px;right:0}
.hero-poster{width:35%;padding:4px;border-radius:5px}
.hero-poster:nth-child(1){left:4%;top:12%}
.hero-poster:nth-child(2){left:33%;top:2%}
.hero-poster:nth-child(3){left:61%;top:20%}
.hero-deck:after{font-size:25px;padding:9px 17px;bottom:8%;left:14%}
.hero-bullets{top:520px;left:0;right:-15%;height:160px}
.hero-bullets span{font-size:23px}
.hero-base{left:22px;right:22px;font-size:9px;bottom:15px}
.section{padding:75px 22px}
.section-title{gap:13px;align-items:start;margin-bottom:40px}
.section-index{font-size:11px;min-width:24px;padding-top:10px;margin-top:5px}
.section-title h2{font-size:clamp(39px,10.5vw,58px);letter-spacing:-2px;line-height:1.2}
.section-arrow{font-size:47px;margin-top:5px}
.story{padding:40px 0 55px}
.story:before{font-size:155px;right:0;letter-spacing:-8px;top:35px}
.story-heading{gap:12px;margin-bottom:28px;position:relative;z-index:4}
.story-heading h3{font-size:42px;letter-spacing:-2px;max-width:90%}
.story-heading>span{font-size:9px}
.story-layout,.story.even .story-layout{display:flex;flex-direction:column;gap:25px}
.story.even .visual-stack{order:0}
.visual-stack{position:relative;top:auto;width:100%;min-height:445px;padding:5px 30px 35px}
.art-stack{height:370px;max-width:310px}
.stack-poster{height:94%}
.stack-poster:nth-child(1){transform:translate3d(calc(-50% + (1 - var(--entry))*-70px),var(--drift),20px) rotate(calc(-4deg + (1 - var(--entry))*-8deg))}
.stack-poster:nth-child(2){transform:translate3d(calc(-50% + 48px + (1 - var(--entry))*65px),20px,0) rotate(calc(12deg + (1 - var(--entry))*9deg))}
.stack-poster:nth-child(3){transform:translate3d(calc(-50% - 45px + (1 - var(--entry))*-40px),15px,0) rotate(calc(-15deg + (1 - var(--entry))*-7deg))}
.visual-stack .stack-badge{font-size:25px;right:0;bottom:0;padding:10px 16px;max-width:95%}
.story-text{font-size:19px;line-height:1.95;letter-spacing:0;padding:17px 10px 17px 19px;width:100%}
.story-text p{margin-bottom:25px}
.story.short .story-text{padding-top:10px;font-size:25px;line-height:1.8}
.story-stream{height:120px;inset:5px -18% auto;opacity:.5}
.integrated-stream span{font-size:29px}
.visual-stream{height:100px;inset:auto -12% 4px}
.visual-stream span{font-size:19px}
.awards{padding-top:65px}
.best-year{grid-template-columns:1fr;gap:15px;padding-bottom:50px}
.best-art{height:470px}
.best-art:before{font-size:130px;top:20px;left:-30px}
.best-copy{padding:0 5px}
.best-copy .award-eyebrow{font-size:15px}
.best-copy h3{font-size:65px;margin:15px 0 22px;letter-spacing:-3px}
.best-copy blockquote{font-size:29px}
.best-copy p{font-size:19px;line-height:1.9}
.award-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 14px}
.award-tile .award-art{padding:4px;border-radius:6px}
.award-label{font-size:20px;margin-top:14px;line-height:1.3}
.award-label span{font-size:19px}
.award-quote{font-size:14px;line-height:1.8}
.tier{padding-top:65px}
.tier-row{grid-template-columns:40px 1fr;gap:12px;padding:25px 0}
.tier-mark{top:110px}
.tier-mark b{font-size:48px;letter-spacing:-2px}
.tier-mark span{font-size:7px;letter-spacing:0;margin-top:8px}
.tier-covers{gap:15px 10px}
.tier-tile{width:calc((100% - 20px)/3);min-width:0;max-width:none}
.tier-art{padding:3px;border-radius:4px}
.tier-tile>span{font-size:8px;margin-top:8px}
.characters{padding-top:65px}
.characters .section-title h2{font-size:52px}
.character-stage{margin:0 -22px;padding:20px 22px 30px}
.character-canvas{min-width:950px}
.character-ruler{padding-top:10px}
.character-rank{font-size:9px}
.next{padding-top:90px}
.next-year{font-size:190px;letter-spacing:-10px;top:90px}
.next h2{font-size:75px;letter-spacing:-4px}
.next>p{font-size:23px;line-height:1.65;margin-top:30px}
.next-covers{gap:14px 9px}
.next-cover{width:calc((100% - 36px)/5);padding:3px}
.next .round-link{margin-top:20px}
footer{margin:0 22px;padding:25px 0;font-size:10px}
footer strong{font-size:13px;letter-spacing:3px}
.chapter-progress{right:3px;gap:10px}
.chapter-progress a{width:10px}
.chapter-progress i{width:3px;height:3px}
.chapter-progress a.active i{width:6px;height:6px;box-shadow:0 0 0 3px #ff397d12}
dialog{padding:35px 23px;max-height:88svh}
dialog h2{font-size:32px}
.dialog-text{font-size:18px;line-height:2}
.dialog-kicker{font-size:10px}
.cursor-halo{display:none}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;transition:none!important}
.reveal-ready,.art-reveal{opacity:1;translate:0 0;rotate:0deg;scale:1}
.integrated-stream{display:none}
.stack-poster{--entry:1!important;--exit:0!important;--drift:0px!important}
}