/* P01 / P03: hard cuts between typefaces, with a stable footprint. */
.type-switch{display:block;line-height:0;width:100%;color:inherit}
.type-switch svg{display:block;width:100%;height:auto;overflow:visible}
.p-type-face{font-size:190px;letter-spacing:-6px;fill:currentColor;opacity:0;animation:type-cut 2.8s steps(1,end) infinite;animation-play-state:paused}
.p-type-face-sans{font-family:var(--sans);font-weight:800;animation-delay:0s}
.p-type-face-serif{font-family:"Bodoni Moda",Georgia,serif;font-weight:700;animation-delay:-.7s}
.p-type-face-block{font-family:"Bungee",Impact,sans-serif;font-weight:400;animation-delay:-1.4s}
.p-type-face-brush{font-family:"Permanent Marker",cursive;font-weight:400;animation-delay:-2.1s}
.type-switch.is-playing .p-type-face{animation-play-state:running}
.type-purple{color:#9162a8}
@keyframes type-cut{0%,24.99%{opacity:1}25%,100%{opacity:0}}
.frame-title{font-size:inherit;line-height:1;margin-top:65px}
.frame-title>span{width:83%}
.frame-title>span:last-child{width:88%;padding-left:0;margin-left:12%;font-size:inherit;margin-top:-12px}
.frame-tag{top:-3px;right:6.5%;z-index:2}
.read-ready{position:relative}
.read-char{position:relative;display:inline-block;white-space:pre}
.read-ready .read-char{color:#c1bdc5}
.read-char:after{content:attr(data-char);position:absolute;inset:0;color:#111;clip-path:inset(0 var(--ink-cut,100%) 0 0);pointer-events:none}
.pop-char{display:inline-block;white-space:pre;transform-origin:center bottom}
.frame-story .p-manuscript-heading{margin-bottom:42px}
.p-system .system-intro{align-items:center;gap:5vw}
.system-type-heading{width:55%;min-width:0}
.system-type-heading>.p-kicker{color:#b294c8;margin-bottom:15px}
.system-type-heading h2{font-size:inherit}
.system-intro-copy{max-width:40%}
.p-system .system-intro-copy .p-manuscript-heading{font-size:clamp(24px,2.5vw,38px)}
.system-intro-copy>p{margin-top:18px;font-size:12px;color:#d0c6d9}
.p-system .system-summary{background:#f1eef4;color:#111;margin:90px 0 0;padding:85px var(--p-pad) 115px;border-top:0;gap:8vw;background-image:linear-gradient(90deg,transparent calc(100% - 1px),#2c1e460d 0);background-size:16.666% 100%}
.system-summary-side>.p-kicker{color:#9162a8;margin-bottom:30px}
.system-summary .p-prose{color:#111}
.p-system .system-summary .copy-quote{color:#111}
.system-summary-side{align-self:start}
@media(min-width:1001px){.system-summary-side{position:sticky;top:125px}}
/* P02: every message occupies the same central stage. */
.p-thread .thread-scroll{height:auto;min-height:0}
.p-thread .thread-sticky{position:relative;top:0;height:auto;min-height:600px}
.p-thread .thread-caption{position:relative;inset:auto;padding:90px 6vw;gap:45px}
.thread-panel{position:relative;width:100%;padding:35px 0}
.p-thread .thread-message{font:500 clamp(23px,2.65vw,40px)/1.85 var(--serif);letter-spacing:.04em;margin:0;max-width:none;color:#2c1e46;text-shadow:0 0 18px #f5f1f6,0 0 8px #f5f1f6}
.thread-message>span{display:block;white-space:nowrap}
.thread-panel .p-link{pointer-events:auto;font-size:12px;margin-top:20px}
.p-thread.thread-is-timed .thread-scroll{height:auto;min-height:0}
.p-thread.thread-is-timed .thread-sticky{position:relative;top:0;height:calc(100svh - 78px);min-height:500px}
.p-thread.thread-is-timed .thread-caption{position:absolute;inset:0;padding:30px;display:block}
.thread-is-timed .thread-caption>.p-kicker{position:absolute;top:calc(50% - 125px);left:0;right:0;margin:0}
.thread-is-timed .thread-panel{position:absolute;inset:0;width:100%;padding:0 5vw;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;filter:blur(10px);transition:opacity .35s,filter .45s,visibility .35s;pointer-events:none}
.thread-is-timed .thread-panel.is-current{opacity:1;visibility:visible;filter:blur(0);transition-delay:.06s}
/* P08 / nome timing: 300ms crossfade, followed by 800ms fully visible. */
[data-perspective="08-heart"] .thread-is-timed .thread-panel{filter:none;transition:opacity .3s ease,visibility .3s;transition-delay:0s}
.thread-is-timed .thread-panel .p-link{position:absolute;top:calc(50% + 85px);left:50%;transform:translateX(-50%);pointer-events:none}
.thread-is-timed .thread-panel.is-current .p-link{pointer-events:auto}
.thread-is-timed .thread-note,.thread-is-timed .thread-progress{z-index:2}
.p-thread:not(.thread-is-timed) .thread-note,.p-thread:not(.thread-is-timed) .thread-progress{display:none}
.p-thread:not(.thread-is-timed) #thread-object{opacity:.2}
@media(max-width:1000px){
 .frame-title{margin-top:60px}
 .p-system .system-intro{gap:25px}
 .p-system .system-intro-copy .p-manuscript-heading{font-size:24px}
 .p-system .system-summary{padding-block:60px 90px}
 .p-thread .thread-message{font-size:clamp(20px,2.65vw,29px)}
}
@media(max-width:600px){
 .frame-title{margin-top:65px}
 .frame-title>span{width:95%}
 .frame-title>span:last-child{width:98%;margin-left:2%;margin-top:-1px}
 .frame-tag{right:6%;top:-4px}
 .p-system .system-intro{display:block}
 .system-type-heading{width:100%}
 .system-intro-copy{max-width:none;margin-top:30px}
 .p-system .system-intro-copy .p-manuscript-heading{font-size:26px}
 .system-intro-copy>p{font-size:12px}
 .p-system .system-summary{margin-top:50px;padding:45px 6vw 70px}
 .system-summary-side{margin-bottom:35px}
 .system-summary-side>.p-kicker{margin-bottom:20px}
 .p-thread.thread-is-timed .thread-sticky{top:0;height:calc(100svh - 70px);min-height:450px}
 .p-thread .thread-message{font-size:clamp(16px,4.3vw,23px);line-height:2.1;letter-spacing:0}
 .p-thread .thread-message.thread-long-line{font-size:min(clamp(16px,4.3vw,23px),calc(88vw / var(--line-characters)))}
 .thread-is-timed .thread-panel{padding-inline:5vw}
 .thread-is-timed .thread-caption>.p-kicker{top:calc(50% - 105px)}
 .thread-note{font-size:9px}
}
.p-motion-paused .p-type-face{animation:none;opacity:0}
.p-motion-paused .p-type-face-sans{opacity:1}
.p-motion-paused .read-char:after{clip-path:none}
.p-motion-paused .pop-char{opacity:1!important;transform:none!important}
@media(prefers-reduced-motion:reduce){
 .p-type-face{animation:none!important;opacity:0}
 .p-type-face-sans{opacity:1}
 .read-char:after{clip-path:none}
 .pop-char{opacity:1!important;transform:none!important}
}


/* P06 / P07: reading cues and paper-strip reveals. */
.p-play .play-manifesto{display:block;background:#f7f4f9;background-image:linear-gradient(#9162a822 1px,transparent 1px),linear-gradient(90deg,#9162a822 1px,transparent 1px);background-size:28px 28px;padding-top:80px}
.p-play .play-manifesto>.p-manuscript-aside{position:relative;top:auto;font-size:clamp(29px,3vw,46px);margin-bottom:60px}
.p-play .play-manifesto .play-spark{position:absolute;right:0;top:0;margin:0}
.p-play .play-manifesto .play-reading{max-width:1200px}
.p-play .play-reading .copy-paragraph{font:600 clamp(21px,2.6vw,39px)/1.95 var(--jp);letter-spacing:0;margin-bottom:55px}
.p-play .play-reading .copy-quote{border-left:0;padding:0;font-family:var(--jp)}
.p-play .play-reading .copy-closing{font-family:var(--jp);padding-top:45px}
.ink-accent{font-style:normal;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.ink-accent .read-char{color:#d1bedc}
.ink-accent .read-char:after{color:#9162a8}
.craft-text-band{display:inline-block;max-width:100%;margin-bottom:10px;vertical-align:top;line-height:2}
.craft-text-band>span{background:#fcfaff;color:#2c1e46;padding:3px 6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.p-craft .craft-copy .copy-paragraph{font-size:clamp(16px,1.35vw,21px);line-height:2.3;margin-bottom:38px}
.p-craft .craft-copy .copy-quote{border:0;padding:0}
@media(max-width:600px){
 .p-play .play-manifesto>.p-manuscript-aside{font-size:26px;margin-bottom:40px}
 .p-play .play-manifesto .play-spark{font-size:45px;opacity:.6;right:0}
 .p-play .play-reading .copy-paragraph{font-size:22px;line-height:1.95;margin-bottom:40px}
 .p-craft .craft-copy .copy-paragraph{font-size:16px}
 .craft-text-band{margin-bottom:8px}
}
.p-motion-paused .craft-text-band{clip-path:none!important}
@media(prefers-reduced-motion:reduce){.craft-text-band{clip-path:none!important}}

/* Single-line closing beats keep the same type system as the first view. */
.p-thread .thread-message.thread-move{font:700 clamp(56px,7vw,100px)/1.2 var(--sans);letter-spacing:-.045em}
.p-thread .thread-message.thread-brand{font:700 clamp(20px,3vw,42px)/1.4 var(--sans);letter-spacing:.025em}