/* Story v2: soft rebellion. The existing portrait bytes remain the identity anchors. */
@layer story {
:root{--night:#1a101e;--night-deep:#100b13;--electric:#f09bc9;--chrome:#e8d8e7}
.story-page{background:var(--night-deep);color:var(--pearl)}
.story-page .header{background:#170e1d;color:#faeef7;border-color:#62435d;padding-block:14px}
.story-page .header .brand,.story-page .footer .brand{background:#fff8f4;padding:4px 9px;transform:rotate(-2deg);border:1px solid #e4b6d3;box-shadow:3px 3px 0 #af6e9e}
.story-page .header .brand img{height:48px}
.story-page .header .nav-pass,.story-page .menu-toggle{border-color:#b38aab}
.story-page .header nav a:hover{color:#f6b3d8}
.story-page .header .nav-pass:hover{background:#f1add1;color:#241329}
.story-page .header nav.open{background:#211426;border-color:#75516c}
.story-page .text-link:focus-visible,.story-page button:focus-visible,.story-page a:focus-visible{outline-color:#e168aa}
.story-hero{position:relative;isolation:isolate;min-height:800px;padding:60px 6% 110px;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:5vw;overflow:hidden;background:radial-gradient(ellipse at 78% 62%,#784d704f,transparent 55%),#1c1122}
.hero-grid{position:absolute;inset:0;background:linear-gradient(#c995bc0b 1px,transparent 1px),linear-gradient(90deg,#c995bc0b 1px,transparent 1px);background-size:74px 74px;mask-image:linear-gradient(90deg,transparent,#000);z-index:-2}
.hero-orbit{position:absolute;right:-6%;top:19%;width:66%;height:380px;border:1px solid #c18bad3d;border-radius:50%;transform:rotate(-24deg);z-index:-1;box-shadow:0 0 70px #ed7fb615,inset 0 0 45px #ed7fb608}
.story-hero-copy{max-width:740px;z-index:3;padding-block:15px 30px}
.chapter-label{font-family:var(--body);font-size:10px;line-height:1.5;letter-spacing:.12em;font-weight:700;display:flex;align-items:center;gap:9px}
.signal-dot{width:6px;height:6px;border-radius:50%;background:#eba2ce;box-shadow:0 0 13px #efa2d5;display:inline-block}
.hero-whisper{font-family:Georgia,serif;font-style:italic;color:#e2b9d2;font-size:clamp(20px,2.2vw,30px);margin:48px 0 18px}
.story-hero h1{font-size:clamp(65px,7.6vw,127px);line-height:.91;letter-spacing:-.028em;font-weight:900}
.story-hero h1 em{font-family:Georgia,serif;font-weight:400;color:#f0a2ce;letter-spacing:-.065em;text-shadow:3px 4px 0 #6e3c61;font-size:1.07em}
.story-hero-description{font-size:16px;line-height:1.8;color:#d1bbd0;margin-top:32px}
.story-actions{display:flex;gap:28px;align-items:center;margin-top:30px;flex-wrap:wrap}
.breach-button{border:1px solid #f7b9df;background:#f1aed3;color:#2f1630;box-shadow:4px 5px 0 #914c78;min-width:196px;font-weight:800}
.breach-button:hover{box-shadow:5px 8px 0 #914c78}
.breach-button[aria-pressed=true]{background:#fff5fa;box-shadow:4px 5px 0 #ce8bb4}
.story-actions .text-link{font-size:12px;color:#e3cbdf}
.breach-status{color:#aa8da6;font-size:11px;margin-top:24px;min-height:20px}
.portrait-boundary{position:relative;width:100%;max-width:510px;justify-self:center;perspective:1300px;transform-style:preserve-3d;--break:0}
.boundary-frame{position:relative;background:#dec6e9;padding:10px 12px 0;border:1px solid #cab4c8;box-shadow:inset 0 0 0 3px #4b364c,13px 22px 0 #65445f55,30px 38px 65px #0009;transform:rotate(4deg) rotateY(-8deg);transition:transform 1.1s cubic-bezier(.2,.8,.2,1),box-shadow 1.1s;z-index:2}
.boundary-frame img{height:500px;object-fit:cover;object-position:center 35%;border:1px solid #6f526f}
.frame-top{display:flex;justify-content:space-between;color:#3c2440;padding:2px 1px 11px;font-size:9px;font-weight:700;letter-spacing:.06em}
.frame-top span:last-child{font-size:13px;letter-spacing:.15em}
.frame-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#493046;padding:12px 3px 13px;font-size:8px;letter-spacing:.04em}
.frame-bottom strong{font:italic 20px Georgia,serif;letter-spacing:-.035em}
.boundary-back{position:absolute;inset:14px -20px -16px 18px;border:1px solid #d5b3d780;background:#c891bd08;transform:rotate(-6deg);transition:transform 1.15s,opacity 1s;z-index:0}
.boundary-back:after{content:'';position:absolute;inset:12px;border:1px dashed #c394bd4d}
.boundary-line{position:absolute;z-index:3;background:linear-gradient(90deg,#4a304a,#f1dcef,#997694);height:3px;box-shadow:0 2px 3px #0004;pointer-events:none;transition:transform 1.15s,opacity 1s}
.line-one{width:53%;left:-10%;top:8%;transform:rotate(-14deg)}
.line-two{width:59%;right:-7%;bottom:9%;transform:rotate(-14deg)}
.little-note{position:absolute;right:-28px;bottom:-37px;padding:19px 24px;z-index:5;background:#f6c4df;color:#50213e;border:1px solid #f8dbef;box-shadow:7px 8px 0 #160c1c6e;transform:rotate(-8deg) translateZ(120px);font:16px/1.35 Georgia,serif;transition:transform 1.1s}
.little-note em{font-size:23px;letter-spacing:-.045em}
.little-note>span{position:absolute;right:-17px;top:-24px;font:45px Georgia,serif;color:#e9a5cc;text-shadow:1px 2px #4f2f4b}
.portrait-boundary.is-open .boundary-frame{transform:rotate(-1deg) rotateY(0) translate3d(-10px,-16px,55px);box-shadow:inset 0 0 0 3px #4b364c,20px 30px 65px #0007,0 0 65px #e37ebc25}
.portrait-boundary.is-open .boundary-back{transform:rotate(-13deg) translate(27px,10px);opacity:.35}
.portrait-boundary.is-open .line-one{transform:rotate(-28deg) translate(-45px,-28px);opacity:.45}
.portrait-boundary.is-open .line-two{transform:rotate(6deg) translate(40px,38px);opacity:.4}
.portrait-boundary.is-open .little-note{transform:rotate(-2deg) translate3d(0,8px,120px)}
.hero-foot{position:absolute;bottom:24px;left:6%;right:6%;display:flex;justify-content:space-between;align-items:center;gap:25px;border-top:1px solid #b082a72b;padding-top:18px;color:#b298ac}
.hero-foot>p{font-size:10px}.hero-foot>.motion-toggle{position:static;color:#d7bad0;padding:6px 0;font-size:10px;border-color:#7a5d75}
.hero-foot>a{font-size:8px;letter-spacing:.14em;display:flex;align-items:center;gap:20px;min-height:36px}
.story-page .suki-section{background:#eed4e3;color:#41132c;width:100%;max-width:none;padding-inline:max(6%,calc((100vw - 1192px)/2));grid-template-columns:.85fr 1.1fr;gap:100px}
.story-page .suki-section .chapter-label{font-size:9px;margin-bottom:24px;color:#79516b}
.story-page .suki-copy h2{font-size:clamp(48px,5.1vw,76px);line-height:.96}
.story-page .suki-copy h2 em{color:#9c416f}
.story-page .suki-copy>p:not(.lead){max-width:490px}
.story-page .suki-copy .lead{margin-block:24px 15px}
.story-page .style-note{max-width:490px;border-color:#c59cb5;font-size:12px}
.story-page .photocard{background:#fff4f7}
.wish-section{display:grid;grid-template-columns:1fr 1fr;gap:75px;padding-block:115px;background:var(--night-deep)}
.wish-heading .chapter-label{color:#ad849f;margin-bottom:28px}
.wish-heading h2{font-size:clamp(45px,5.5vw,79px)}
.wish-heading h2 em{color:#e9a5ca}
.wish-heading>p:last-child{color:#b79eaf;margin-top:25px;font-size:16px}
.wish-tabs{display:flex;gap:7px;justify-content:space-between;margin-bottom:22px}
.wish-tabs button{background:none;color:#ba9aaf;border:0;border-bottom:1px solid #634b5d;padding:12px 5px;font-size:11px;min-height:44px;flex:1}
.wish-tabs button[aria-pressed=true]{color:#ffc5e6;border-color:#eea1cd}
.wish-paper{position:relative;background:#eed3e3;color:#44253b;padding:56px 40px 28px;min-height:340px;transform:rotate(3deg);box-shadow:8px 10px 0 #a7759533;border:1px solid #f8e7f3;transition:background .25s}
.wish-paper[data-wish=butterflies]{background:#dacbea}.wish-paper[data-wish=belonging]{background:#fff4ee}
.wish-number{position:absolute;top:14px;left:22px;font:11px var(--body);color:#82536f}
.wish-paper>p{font-family:Georgia,serif;font-size:26px;line-height:1.5;min-height:156px;letter-spacing:-.025em}
.diary-signature{font:italic 29px Georgia,serif;text-align:right;margin:20px 0 22px}.diary-signature span{font-size:22px}
.wish-caption{font-size:8px;color:#845c76;letter-spacing:.04em}
.beyond-section{background:radial-gradient(ellipse at 72% 60%,#5a365a99,transparent 52%),#26172d;display:grid;grid-template-columns:1.2fr 1fr;gap:60px;padding:90px max(6%,calc((100vw - 1192px)/2));overflow:hidden;align-items:center;border-block:1px solid #725469}
.beyond-copy .chapter-label{color:#bd8cae;margin-bottom:26px}
.beyond-copy h2{font-size:clamp(52px,6vw,86px);line-height:.96}
.beyond-copy h2 em{color:#efa8cf}
.beyond-copy>p:not(.chapter-label){margin:25px 0;color:#c7adbf;font-size:16px}
.beyond-copy .text-link{font-size:12px;color:#e5c9dd}
.beyond-stage{height:610px;position:relative;isolation:isolate;display:grid;place-items:center;perspective:900px;min-width:0}
.stage-ring{position:absolute;bottom:12px;left:-20%;width:140%;height:80%;border:1px solid #d3a2c352;border-radius:50%;transform:rotateX(73deg);box-shadow:0 0 40px #cd82b023,inset 0 0 30px #cd82b023;z-index:-1}
.stage-window{width:300px;max-width:100%;padding:9px;background:linear-gradient(110deg,#dab9d4,#655366 43%,#edd3e7);transform:rotate(-4deg) rotateY(7deg);box-shadow:20px 30px 60px #0b060f77}
.stage-window img{height:470px;object-fit:cover;object-position:center}
.stage-caption{position:absolute;bottom:0;font-size:8px;letter-spacing:.17em;color:#b291a9}
.story-page .backstage-section{padding-top:110px;padding-bottom:100px}
.story-page .backstage-heading h2 em{color:#e0a1c7}.story-page .backstage-heading p{color:#bda2b5}
.story-page .channel-card,.story-page .collect-card{color:#41132c}
.story-page .channel-card{border-color:#916c86}.story-page .collect-card{background:#d8c5e4}
.story-page .dance-section{color:#41132c}
.story-page .dance-heading h2{font-size:clamp(48px,5vw,76px)}
.story-page .pass-section{background:#f7eaf3;color:#41132c;width:100%;max-width:none;padding-inline:max(6%,calc((100vw - 1192px)/2))}
.story-page .club-invitation{background:#dcb9d3;color:#41132c;width:100%;max-width:none;padding-inline:max(6%,calc((100vw - 1192px)/2));border:0}
.story-page .club-invitation h2{font-family:var(--display);font-style:normal;font-weight:900;font-size:clamp(42px,4vw,60px)}
.story-page .club-invitation h2 em{font:italic 1em Georgia,serif}
.story-page .closing{padding-top:0;padding-bottom:100px}.story-page .closing h2 em{color:#e7a2ca}
.story-page .closing .button{background:#efb2d4;color:#32152c;border-color:#efb2d4;box-shadow:4px 5px 0 #774c6b}
.story-page .footer{border-color:#5b3d54}.story-page .footer p,.story-page .footer>span{color:#bfa1b6}.story-page .footer .text-link{color:#e2c2d7}
.story-page dialog{color:#41132c}.story-page .noscript{background:#f8edf4;color:#41132c}
.club-page .club-hero{background:radial-gradient(ellipse at 75% 45%,#69405e33,transparent 55%),#211326;color:#fff4fa;border-bottom:1px solid #74445f;min-height:780px}
.club-page .club-hero h1{font-size:clamp(60px,7.5vw,110px)}.club-page .club-hero h1 em{color:#eea2ce}.club-page .club-name{color:#c48aae}
.club-page .club-hero .primary{background:#f2b4d8;color:#32182b;box-shadow:4px 5px 0 #7a486c;border-color:#f2b4d8}
.club-page .club-hero .motion-toggle{color:#c2a2b7}.club-page .belong-section{color:#f9e9f4}.club-page .belong-copy p{color:#d6bed0}.club-page .big-welcome em,.club-page .club-promise{color:#eba7ce}.club-page .belong-copy h2{color:#f3bcdd}
.club-page .club-play h2 em{color:#ec9acb}.club-page .club-play>p{color:#cab0c1}.club-page .prompt-picker button{color:#e9d0e1;border-color:#89617c}.club-page .prompt-picker button[aria-pressed=true]{background:#e8a6cf;color:#31132c;border-color:#e8a6cf}
.club-page .prompt-paper{color:#41132c}.club-page .club-code{padding-top:90px}.club-page .club-code h2 em{color:#e4a4c9}.club-page .club-rules details{border-color:#5e4058}.club-page .club-rules p,.club-page .club-note{color:#c4a8bc}.club-page .closing{padding-top:30px}
@media(min-width:1700px){.story-hero{padding-inline:max(6%,calc((100vw - 1420px)/2))}.boundary-frame img{height:550px}}
@media(max-width:1100px){.story-hero{min-height:740px;padding-inline:5%;gap:30px}.story-hero h1{font-size:8.2vw}.hero-whisper{margin-top:35px}.story-hero-description{font-size:14px}.portrait-boundary{max-width:420px}.boundary-frame img{height:430px}.frame-bottom strong{font-size:17px}.frame-bottom{font-size:7px}.little-note{right:-5px;font-size:14px}.little-note em{font-size:21px}.story-actions{gap:20px}.hero-foot{left:5%;right:5%}.story-page .suki-section{gap:55px;padding-inline:40px}.wish-section{gap:40px}.wish-paper{padding-inline:30px}.wish-paper>p{font-size:24px}.beyond-section{gap:35px;padding-inline:40px}.beyond-stage{height:540px}.stage-window{width:260px}.stage-window img{height:420px}.club-page .club-hero{min-height:690px}}
@media(max-width:767px){.story-page .header{height:80px;padding-inline:20px}.story-page .header .brand{width:136px}.story-page .header .brand img{height:41px}.story-hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:38px 25px 114px;gap:48px}.story-hero-copy{padding:0}.story-hero .chapter-label{font-size:8px;letter-spacing:.06em}.hero-whisper{margin-top:34px;font-size:22px}.story-hero h1{font-size:15.6vw;line-height:.94}.story-hero-description{font-size:14px;margin-top:23px}.story-actions{gap:20px;margin-top:24px}.breach-button{min-width:174px;padding-inline:16px;font-size:12px}.story-actions .text-link{font-size:11px;gap:12px}.breach-status{margin-top:20px;font-size:10px}.portrait-boundary{width:calc(100% - 24px);max-width:420px;align-self:center;margin-bottom:28px}.boundary-frame img{height:390px}.boundary-frame{padding:8px 8px 0}.frame-top{font-size:7px;padding-bottom:8px}.frame-top span:last-child{font-size:11px}.frame-bottom{padding-block:10px;font-size:6px}.frame-bottom strong{font-size:17px}.boundary-back{inset:12px -14px -12px 12px}.little-note{right:-14px;bottom:-30px;font-size:13px;padding:14px 18px}.little-note em{font-size:21px}.little-note>span{font-size:38px;right:-9px}.line-one{left:-7%}.line-two{right:-5%}.hero-orbit{width:130%;height:280px;top:65%;right:-20%}.hero-foot{left:25px;right:25px;bottom:20px;flex-wrap:wrap;gap:8px;justify-content:space-between;padding-top:15px}.hero-foot>p{font-size:8px;max-width:240px}.hero-foot .motion-toggle{font-size:9px;min-height:32px}.hero-foot>a{font-size:7px;width:100%;justify-content:space-between;min-height:25px}.story-page .suki-section{grid-template-columns:1fr;gap:50px;padding:65px 25px 70px}.story-page .suki-section .portrait-stack{max-width:265px;margin-top:20px}.story-page .suki-copy h2{font-size:13vw}.story-page .suki-copy .chapter-label{font-size:8px}.story-page .suki-copy>p:not(.lead){font-size:14px}.story-page .style-note{font-size:11px}.wish-section{grid-template-columns:1fr;gap:37px;padding-block:68px}.wish-heading .chapter-label{font-size:8px}.wish-heading h2{font-size:13vw}.wish-heading>p:last-child{font-size:15px;margin-top:22px}.wish-paper{padding:46px 26px 25px;min-height:320px;transform:rotate(2deg)}.wish-paper>p{font-size:24px}.wish-tabs{gap:5px}.wish-tabs button{font-size:10px}.beyond-section{grid-template-columns:1fr;gap:12px;padding:68px 25px 45px}.beyond-copy .chapter-label{font-size:8px}.beyond-copy h2{font-size:15vw}.beyond-copy>p:not(.chapter-label){font-size:15px}.beyond-stage{height:560px}.stage-window{width:270px}.stage-window img{height:430px}.stage-ring{left:0;width:100%;height:80%}.story-page .backstage-section{padding-block:68px}.story-page .backstage-heading h2{font-size:12vw}.story-page .dance-heading h2{font-size:12vw}.story-page .pass-section,.story-page .club-invitation{padding-inline:25px}.story-page .club-invitation{gap:50px}.story-page .club-invitation h2{font-size:12vw}.story-page .closing{padding-bottom:70px}.story-page .closing h2{font-size:18vw}.story-page .footer .brand{width:120px}.story-page .footer .brand img{height:39px}.club-page .club-hero{min-height:0;padding:46px 25px 70px}.club-page .club-hero h1{font-size:16vw;line-height:.94}.club-page .club-name{font-size:11px}.club-page .belong-copy h2{font-size:12vw}.club-page .club-play h2{font-size:14vw}.club-page .club-code{padding-top:64px}.club-page .club-code h2{font-size:13vw}.club-page .club-hero .motion-toggle{position:static}}
@media(max-width:370px){.story-hero{padding-inline:20px}.hero-foot{left:20px;right:20px}.story-actions{gap:12px}.story-actions .text-link{font-size:10px}.breach-button{min-width:161px;padding-inline:13px;font-size:11px}.boundary-frame img{height:330px}.frame-bottom strong{font-size:14px}.story-page .suki-section,.beyond-section,.story-page .pass-section,.story-page .club-invitation{padding-inline:20px}.wish-paper>p{font-size:22px}.wish-paper{padding-inline:22px}.stage-window{width:240px}.stage-window img{height:390px}.beyond-stage{height:510px}}
html[data-motion=off] .boundary-frame,html[data-motion=off] .boundary-back,html[data-motion=off] .boundary-line,html[data-motion=off] .little-note{transition:none}
@media(prefers-reduced-motion:reduce){.boundary-frame,.boundary-back,.boundary-line,.little-note,.wish-paper{transition:none}}
}