@font-face{font-family:Editorial;src:url('/assets/editorial.woff2') format('woff2');font-weight:300 700;font-display:swap}@font-face{font-family:Editorial;src:url('/assets/editorial-italic.woff2') format('woff2');font-style:italic;font-weight:300 700;font-display:swap}@font-face{font-family:Manrope;src:url('/assets/manrope.woff2') format('woff2');font-weight:200 800;font-display:swap}
/* WHITE WITCH CINEMATIC — every scene is driven by its own --p (0→1), written by white-witch-cinematic.js from the scene's native scroll position.
   No wheel interception, no pinned scenes. All motion below is a pure function of --p; the JS adds only what CSS cannot (paths, clip polygons, trig). */
:root{--paper:#faf8f3;--ink:#4e493f;--gold:#967c4d;--gold2:#c9ad6d;--muted:#81786d;--lilac:#946089;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:12px/1.8 Manrope,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid var(--lilac);outline-offset:6px}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Editorial,Georgia,serif;font-weight:400;line-height:.94;letter-spacing:-.045em}em{font-weight:400;color:var(--gold)}::selection{background:#e6ddeb}.skip{position:fixed;top:-100px;z-index:150;background:#fff;padding:14px}.skip:focus{top:60px}main{overflow:clip}.defs{position:absolute;width:0;height:0;overflow:hidden}
.white-witch .style-lab{background:#f0ece7;color:#706458;border-color:#c8bba2;box-shadow:none}.white-witch .style-lab-label small{color:#85786c}.white-witch .style-tabs a span{color:#9b8c7b}.white-witch .style-tabs a[aria-current=page]{background:#e8dfcf;color:#755633;border-color:#b79c6c}.white-witch .style-tabs{scrollbar-color:#bfa980 #f0ece7}.white-witch .style-tabs a:hover{background:#e9e1d9}
.reading-light{position:fixed;top:56px;left:0;z-index:102;height:2px;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#c4aa68,#fff,#b599c5);box-shadow:0 0 9px #d9bc70}
.witch-header{position:absolute;top:85px;left:5%;right:5%;z-index:9;display:flex;align-items:center;justify-content:space-between;gap:25px}.wordmark{font:34px/1 Editorial,Georgia,serif;letter-spacing:-1px;white-space:nowrap;text-align:center}.wordmark i{font-size:20px;color:var(--gold);font-style:normal}.wordmark small{display:block;font:6px Manrope,sans-serif;letter-spacing:4px;margin-top:9px}.header-note{font-size:9px;letter-spacing:1px;margin-left:auto}
.motion-toggle{position:fixed;right:22px;bottom:22px;z-index:110;min-height:44px;padding:8px 15px;background:#fffcf5e8;border:1px solid #baaa884f;border-radius:30px;font-size:9px;backdrop-filter:blur(8px);box-shadow:0 3px 22px #98835c25}
.eyebrow{font-size:8px;letter-spacing:2.5px;font-weight:500;color:#8a795f}.soft-copy{font-size:12px;line-height:1.9;color:var(--muted)}
.round-link{display:inline-flex;align-items:center;gap:25px;font-size:9px;letter-spacing:.5px;margin-top:30px}.round-link b{display:grid;place-items:center;border:1px solid #c2b29188;border-radius:50%;width:49px;height:49px;font-size:21px;font-weight:300;transition:background .3s,transform .4s}.round-link:hover b{background:#e5dacb;transform:translateY(4px)}
.text-link{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;font-size:9px;padding:12px 0;min-height:44px;border:0;border-bottom:1px solid #bba888;margin-top:5px;background:none}

/* ───────── shared butterflies (built by JS; wings flap as a function of scroll) ───────── */
.bfw{position:absolute;left:0;top:0;width:var(--sz,90px);height:calc(var(--sz,90px) * .88);margin:calc(var(--sz,90px) * -.44) 0 0 calc(var(--sz,90px) * -.5);pointer-events:none;opacity:0;will-change:transform,opacity}
.bf{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 5px #8d77502e)}
.bf .wing{transform-origin:0 0;transform-box:view-box;transform:scaleX(var(--flap,1))}
.bf .w{stroke:#b49b64;stroke-width:.9;stroke-linejoin:round}.bf .vein{fill:none;stroke:#b49b6488;stroke-width:.7}.bf .body{fill:#a58b57}.bf .ant{fill:none;stroke:#a58b57;stroke-width:.9;stroke-linecap:round}
.fx{position:absolute;inset:0;pointer-events:none}.live .fx .bfw{will-change:transform,opacity}

/* ───────── 1 · HERO: the portrait is a camera move ───────── */
.hero{--p:0;--g:0;--zoom:calc(1.03 + var(--p) * .24);position:relative;height:calc(100svh - 56px);min-height:760px;max-height:1080px;isolation:isolate;overflow:hidden;background:var(--paper)}
.hero-intro{position:absolute;inset:0;z-index:-1;animation:hero-in 1.8s var(--ease) both}
.hero-frame{position:absolute;inset:0;overflow:hidden;clip-path:inset(calc(var(--p) * 6%) calc(var(--p) * 11%) 0 calc(var(--p) * 11%) round calc(var(--p) * 38%) calc(var(--p) * 38%) 0 0)}
.hero-img{position:absolute;inset:-4%;background:url('/assets/white-witch-brunette-refined.png') 62% 36%/cover no-repeat;transform-origin:75% 38%;transform:translate3d(0,calc(var(--p) * -3.5%),0) scale(var(--zoom)) rotate(calc(var(--p) * -1.3deg))}
.hero-rays{position:absolute;inset:-25%;background:conic-gradient(from 196deg at 10% 0%,transparent 0 7%,#ffffffcc 10%,transparent 14% 20%,#fff9 23%,transparent 28% 36%,#ffffff88 39%,transparent 44% 100%);mix-blend-mode:soft-light;opacity:calc(.38 + var(--p) * .55);transform:rotate(calc(var(--p) * 16deg));transform-origin:10% 0}
.hero-fx{position:absolute;inset:0}
.hero-sheen{position:absolute;inset:0;background:linear-gradient(112deg,transparent 28%,#fff9 44%,#fff4 52%,transparent 62%);mix-blend-mode:soft-light;transform:translate3d(calc(-70% + var(--p) * 170%),0,0)}
.hero-veil{position:absolute;inset:0;background:linear-gradient(90deg,#faf8f3b5 0,#faf8f35c 34%,transparent 62%),linear-gradient(0deg,var(--paper),transparent 27%)}
.earring{position:absolute;left:var(--ex,65%);top:var(--ey,44%);width:0;height:0}
.earring-halo{position:absolute;width:150px;height:150px;margin:-75px;border-radius:50%;background:radial-gradient(circle,#fff 0,#fff2c4b0 22%,transparent 66%);mix-blend-mode:screen;opacity:var(--g);transform:scale(calc(.35 + var(--g) * 1.1 / var(--zoom)))}
.earring-star{position:absolute;width:76px;height:76px;margin:-38px;overflow:visible;mix-blend-mode:screen;filter:drop-shadow(0 0 6px #fff);opacity:var(--g);transform:rotate(calc(var(--p) * 150deg)) scale(calc(var(--g) * 1.15 / var(--zoom)))}
.hero-copy{position:relative;z-index:7;padding:175px 0 75px 9%;max-width:880px;opacity:calc(1 - var(--p) * 1.75);transform:translate3d(0,calc(var(--p) * -54px),0)}
.chapter-label{font-size:10px;letter-spacing:7px;margin-top:35px;color:#98876b}.hero-copy h1{font-size:clamp(80px,7vw,112px);margin:25px 0 30px;text-shadow:0 2px 32px #fff9}.hero-description{font-size:12px;line-height:1.9;color:#736d63}
.js .rise{opacity:0;transform:translate3d(0,26px,0);transition:opacity 1.2s var(--ease),transform 1.4s var(--ease)}.js .ready .rise{opacity:1;transform:none}.rise:nth-child(2){transition-delay:.12s}.rise:nth-child(3){transition-delay:.24s}.rise:nth-child(4){transition-delay:.38s}.rise:nth-child(5){transition-delay:.5s}
.hero-footnote{position:absolute;bottom:30px;left:10%;font-size:6px;letter-spacing:2px;color:#988a77;z-index:7}.side-note{position:absolute;right:3%;top:47%;writing-mode:vertical-rl;font-size:7px;letter-spacing:4px;color:#8f7d62;z-index:7}
@keyframes hero-in{from{opacity:0;transform:scale(1.07)}to{opacity:1;transform:none}}

/* ───────── 2 · AWAKENING: a ritual circle draws itself, a butterfly rides it, words light ───────── */
.awakening{--p:.5;position:relative;text-align:center;padding:150px 8% 120px;min-height:900px;display:grid;place-items:center;isolation:isolate;background:radial-gradient(ellipse at 50% 30%,#fff 0,transparent 60%)}
.ritual-wrap{position:absolute;z-index:-1;width:min(86vw,760px);aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%) rotate(calc(var(--p) * 70deg))}
.ritual{width:100%;height:100%;overflow:visible}.ritual circle{fill:none;stroke:#b8a277;stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0, (var(--p) - var(--d,.05)) * 2.4, 1))}.ritual .r1{--d:.04}.ritual .r2{--d:.14;stroke:#c9b38a}.ritual .r3{--d:.24;stroke:#c9aed0}
.rs{fill:#b79e6b;opacity:clamp(0,(var(--p) - .42) * 5,1)}.rs2,.rs4{fill:#ae93b4}
.ritual-fly{position:absolute;inset:0}
.awakening-copy{position:relative;z-index:2}.awakening h2{font-size:clamp(48px,5.6vw,85px);line-height:1.13;margin:35px 0}
.spell-words .word{display:inline-block;opacity:.18;transform:translateY(10px);transition:opacity .5s,transform .7s var(--ease)}.spell-words .word.lit{opacity:1;transform:none}

/* ───────── 3 · THE THREE TALISMANS: three different stories told by the same triptych ─────────
   Plate = one panel of white-witch-talismans.png, cropped without distortion (layer = 300% × auto, so panel k sits exactly in the box).
   Overlay anchors are in plate percentages, tuned in --px/--py (the panel window) and in the % positions below. */
.edit-head{padding:110px 7% 20px;max-width:1500px;margin:auto}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:35px}.section-heading h2{font-size:clamp(65px,6vw,92px);margin-top:24px;line-height:1.03}.section-heading>p{font-size:11px;color:var(--muted);padding-bottom:12px}
.js .reveal{opacity:0;transform:translate3d(0,30px,0);transition:opacity 1s ease,transform 1.2s var(--ease)}.js .reveal.visible{opacity:1;transform:none}
.spread{--p:.5;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:6%;padding:100px 7%;max-width:1500px;margin:auto;perspective:1600px}
.spread.flip .plate-wrap{order:2}
.plate-wrap{position:relative;justify-self:center;width:min(100%,500px);transform-style:flat}
.plate-box{position:relative}
.plate-open{display:block;width:100%;padding:0;border:0;background:none;position:relative;z-index:2}
.plate{position:relative;display:block;aspect-ratio:5/7.2;overflow:hidden;isolation:isolate;background:#efe8da;box-shadow:0 30px 60px -32px #8b784f66,0 0 0 1px #d7c8a655}
.layer{position:absolute;inset:0;display:block;background:url('/assets/white-witch-talismans.png') var(--px,0%) var(--py,60%)/300% auto no-repeat;transform-origin:var(--ox,50%) var(--oy,40%)}
.live .layer,.live .sweep,.live .moon{will-change:transform}
.plate-rim{position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px #fffa,inset 0 0 0 9px #ffffff30,inset 0 0 38px #fff7;pointer-events:none;z-index:9}
.lens-wrap .plate-tag{margin-top:30px}.plate-tag{display:block;margin:15px 0 0;font-size:6px;letter-spacing:2.2px;color:#988a77;text-align:center}
.spread-copy{position:relative;z-index:3;max-width:430px}.spread.flip .spread-copy{justify-self:end}.card-number{display:block;font-size:6px;letter-spacing:1.7px;color:#958575;margin-bottom:24px}
.talisman-title{font-size:clamp(44px,4.4vw,66px);line-height:1;letter-spacing:-.035em;margin:0 0 20px}.talisman-title .line{display:block;overflow:hidden;padding-bottom:.12em}.talisman-title .line>span{display:block;transform:translate3d(0,calc((1 - clamp(0, (var(--p) - .14) * 5, 1)) * 108%),0)}
.talisman-caption{font:italic 23px/1.3 Editorial,Georgia,serif;color:#8c7957;margin-bottom:18px;opacity:clamp(0,(var(--p) - .26) * 6,1);transform:translate3d(0,calc((1 - clamp(0, (var(--p) - .26) * 6, 1)) * 16px),0)}
.talisman-tone{font-size:7px;text-transform:uppercase;letter-spacing:1.2px;color:#a18f79;margin-bottom:26px;opacity:clamp(0,(var(--p) - .34) * 6,1)}.spread-copy .text-link{opacity:clamp(0,(var(--p) - .4) * 6,1)}

/* 3a · THE BUTTERFLY WISH — the plate turns on its edge like a page, the camera pushes to the huggies, a glint crosses the gold, three butterflies hatch from the pendants and fly out into the page */
.spread-wish .plate-wrap{transform:rotateY(calc((.5 - var(--p)) * 46deg)) translate3d(0,calc((.5 - var(--p)) * 70px),0);transform-origin:50% 50%}
.plate-wish{--px:0%;--py:64.3%;--ox:54%;--oy:36%;border-radius:50% 50% 4px 4px/35% 35% 4px 4px}
.plate-wish .l-base{transform:scale(calc(1 + (1 - clamp(0, (var(--p) - .06) / .5, 1)) * .5 + clamp(0, (var(--p) - .56) / .44, 1) * .07))}
.sweep{position:absolute;inset:0;background:linear-gradient(104deg,transparent 36%,#fffffff2 50%,transparent 64%);mix-blend-mode:screen;-webkit-mask-image:radial-gradient(ellipse 46% 26% at 54% 36%,#000 40%,transparent 100%);mask-image:radial-gradient(ellipse 46% 26% at 54% 36%,#000 40%,transparent 100%);transform:translate3d(calc(-140% + clamp(0, (var(--p) - .26) / .42, 1) * 280%),0,0)}
.halo-pulse{position:absolute;width:21%;aspect-ratio:1;margin:-10.5% 0 0 -10.5%;border-radius:50%;border:1px solid #e8cf8a;box-shadow:0 0 22px #ffe9a8aa,inset 0 0 18px #fff8;opacity:calc(clamp(0,(var(--p) - .24) * 7,1) * (1 - clamp(0,(var(--p) - .5) * 5,1)));transform:scale(calc(.3 + clamp(0, (var(--p) - .24) / .3, 1) * 1.7))}
.hp1{left:40.5%;top:40%}.hp2{left:70%;top:44.8%}.hp2{transform:scale(calc(.3 + clamp(0, (var(--p) - .3) / .3, 1) * 1.7))}
.glint{position:absolute;width:15%;aspect-ratio:1;margin:-7.5% 0 0 -7.5%;transform:scale(calc(clamp(0,(var(--p) - .22) * 4,1) * (1 - clamp(0,(var(--p) - .78) * 4,1)) * 1.15)) rotate(calc(var(--p) * 90deg));mix-blend-mode:screen}
.glint:before,.glint:after{content:'';position:absolute;left:50%;top:50%;background:radial-gradient(closest-side,#fff,#fff0);transform:translate(-50%,-50%)}.glint:before{width:100%;height:5%}.glint:after{width:5%;height:100%}
.g1{left:38%;top:30%}.g2{left:71%;top:31%}.g3{left:35%;top:70%}

/* 3b · THE MOONLIT PEARL — an eclipse reveals a crescent first, then the full moon; the whole plate hangs from a gold chain and swings with your scroll; pearls bloom; pearl bokeh drifts at three depths */
.spread-pearl .plate-wrap{transform-origin:50% 0;transform:rotate(calc(var(--sway,0) * 1deg))}
.chain-hang{display:block;position:relative;height:84px;width:12px;margin:0 auto;z-index:1}.chain-hang:before{content:'';position:absolute;left:5px;top:14px;bottom:-2px;width:2px;background:repeating-linear-gradient(180deg,#c9ad6d 0 6px,#fff0cf 6px 8px,transparent 8px 11px)}.chain-hang i{position:absolute;left:-1px;top:0;width:14px;height:20px;border:2px solid #c9ad6d;border-radius:50%;box-shadow:0 0 8px #fff9}
.plate-pearl{--px:50%;--py:43%;--ox:50%;--oy:42%;border-radius:50%}
.plate-pearl .l-base{transform:scale(calc(1.34 - clamp(0,(var(--p) - .1) / .45,1) * .34 + clamp(0,(var(--p) - .58) / .42,1) * .08)) translate3d(0,calc((.5 - var(--p)) * 5%),0)}
.moon{position:absolute;inset:-3%;border-radius:50%;background:radial-gradient(circle at 36% 30%,#fffdf8 0,#f7f0e1 42%,#e8dcc2 100%);box-shadow:inset 0 0 0 2px #d1b97a99,inset 0 0 50px #fff,0 0 45px #fffc;z-index:4}
.moon-a{transform:translate3d(calc(var(--ea,0) * 134%),0,0)}.moon-b{transform:translate3d(calc(-134% + var(--eb,0) * 96%),0,0)}
.bloom{position:absolute;width:30%;aspect-ratio:1;margin:-15% 0 0 -15%;border-radius:50%;background:radial-gradient(circle,#fff 0,#fff6dc99 32%,transparent 68%);mix-blend-mode:screen;opacity:calc(clamp(0,(var(--p) - .3) * 5,1) * (1 - clamp(0,(var(--p) - .72) * 5,1)));transform:scale(calc(.5 + var(--bl,0) * .9));z-index:3}
.b1{left:31.5%;top:46%}.b2{left:50.5%;top:47%}
.orbs{position:absolute;inset:-12% -22%;pointer-events:none;z-index:0}
.orb{position:absolute;display:block;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff 0,#fffaf0 22%,#efe3d0 60%,#d8c6a8 100%);box-shadow:0 8px 24px #8f7a5a30,inset -6px -8px 14px #bda98230;transform:translate3d(0,calc((.5 - var(--p)) * var(--k) * 1px),0)}
.o1{width:34px;height:34px;left:2%;top:18%;--k:520}.o2{width:20px;height:20px;left:94%;top:36%;--k:360}.o3{width:58px;height:58px;left:-3%;top:62%;--k:760;filter:blur(2.5px);opacity:.8}.o4{width:26px;height:26px;left:90%;top:72%;--k:300}.o5{width:92px;height:92px;left:97%;top:14%;--k:980;filter:blur(7px);opacity:.55}.o6{width:15px;height:15px;left:9%;top:92%;--k:220}
.phases{display:flex;gap:14px;margin:0 0 28px}.ph{position:relative;width:26px;height:26px;border-radius:50%;background:#e9dfc8;box-shadow:inset 0 0 0 1px #c9ad6d99;overflow:hidden}.ph:after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--paper);transform:translateX(var(--sh,0%))}
.ph1{--sh:calc(18% * clamp(0,(var(--p) - .18) * 9,1))}.ph2{--sh:calc(48% * clamp(0,(var(--p) - .3) * 9,1))}.ph3{--sh:calc(104% * clamp(0,(var(--p) - .42) * 9,1))}.ph4{--sh:calc(-48% * clamp(0,(var(--p) - .56) * 9,1))}.ph5{--sh:calc(-18% * clamp(0,(var(--p) - .68) * 9,1))}

/* 3c · THE STARLIGHT SPELL — a spinning star-shaped iris opens onto the silver; a constellation draws itself through every pendant; a spark runs down the chain; cool light settles over the metal */
.spread-star .plate-wrap{transform:rotateX(calc((1 - clamp(0, var(--p) * 2.2, 1)) * 34deg)) translate3d(0,calc((.5 - var(--p)) * 54px),0);transform-origin:50% 100%}
.plate-star{--px:100%;--py:43%;--ox:60%;--oy:55%;border-radius:2px}
.plate-star .l-base{transform:scale(calc(1.18 - clamp(0,(var(--p) - .1) / .5,1) * .18 + clamp(0,(var(--p) - .6) / .4,1) * .06)) rotate(calc((.5 - var(--p)) * 2.4deg))}
.chill{position:absolute;inset:0;background:linear-gradient(160deg,#dfe8ff55,#ffffff00 40%,#d4c8f044);mix-blend-mode:soft-light;opacity:clamp(0,(var(--p) - .2) * 3,1)}
.constel{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cl path{fill:none;stroke:#7686bd;stroke-width:1.25;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:1;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #c9d6ff);stroke-dashoffset:calc(1 - clamp(0, (var(--p) - var(--d,.3)) / .16, 1))}.cl path:nth-child(1){--d:.30}.cl path:nth-child(2){--d:.36}.cl path:nth-child(3){--d:.44}.cl path:nth-child(4){--d:.52}.cl path:nth-child(5){--d:.34}
.n{fill:#fff;stroke:#7686bd;stroke-width:.5;opacity:clamp(0,(var(--p) - var(--d,.3)) * 12,1);filter:drop-shadow(0 0 3px #c9d6ff)}.n1{--d:.3}.n2{--d:.36}.n3{--d:.4}.n4{--d:.5}.n5{--d:.58}
.chain-spark{position:absolute;left:calc(64% + var(--cs,0) * 18%);top:calc(var(--cs,0) * 56%);width:12px;height:12px;margin:-6px;border-radius:50%;background:radial-gradient(circle,#fff,#e9efff 40%,transparent 72%);box-shadow:0 0 14px 4px #dbe5ff;opacity:calc(var(--cs,0) * (1 - var(--cs,0)) * 4)}
.twinkle{position:absolute;width:11%;aspect-ratio:1;margin:-5.5% 0 0 -5.5%;mix-blend-mode:screen;transform:scale(calc(clamp(0,(var(--p) - var(--d,.4)) * 6,1) * (1 - clamp(0,(var(--p) - .86) * 6,1)))) rotate(calc(var(--p) * 120deg))}
.twinkle:before,.twinkle:after{content:'';position:absolute;left:50%;top:50%;background:radial-gradient(closest-side,#fff,#fff0);transform:translate(-50%,-50%)}.twinkle:before{width:100%;height:6%}.twinkle:after{width:6%;height:100%}
.tw1{left:31%;top:56%;--d:.42}.tw2{left:54%;top:60.5%;--d:.5}.tw3{left:82%;top:65.5%;--d:.58}.tw4{left:31.5%;top:36%;--d:.36}

.concept-note{font-size:8px;color:#918777;text-align:center;margin:30px 0 40px}

/* ───────── 4 · FLIGHT: a flock gathers from below, closes into a wreath around the words, then lifts away ───────── */
.flight{--p:.5;position:relative;isolation:isolate;min-height:900px;display:grid;place-items:center;text-align:center;padding:120px 8%;background:radial-gradient(ellipse,#f2e8f055,transparent 66%)}
.flock{position:absolute;inset:0;overflow:visible;z-index:1;pointer-events:none}.flock .bfw{opacity:0}
.flight-copy{position:relative;z-index:3}.flight h2{font-size:clamp(64px,8vw,124px);line-height:1.02;margin:35px 0}
.cast-button{position:relative;z-index:8;margin-top:35px;min-height:54px;border:1px solid #ac957363;background:#fffcf799;border-radius:50px;padding:16px 27px;font-size:10px;letter-spacing:.3px;box-shadow:0 6px 25px #a7977122;transition:box-shadow .4s,background .4s}.cast-button span{padding-left:28px}.cast-button:hover{background:#fff;box-shadow:0 0 38px #dec7df90}
.spell-status{font:italic 19px Editorial;margin-top:20px;color:#a29379;min-height:35px}
.released .flock .bf{animation:burst 2.8s var(--ease) both}
@keyframes burst{0%{transform:none;opacity:1}100%{transform:translate3d(var(--bx,0),var(--by,0),0) rotate(var(--br,0deg)) scale(1.5);opacity:0}}

/* ───────── 5 · MUSE: the portrait becomes a lens that travels from the face to the earring ───────── */
.muse{--p:.5;display:grid;grid-template-columns:1.08fr 1fr;align-items:center;gap:4%;padding:90px 6% 110px;background:linear-gradient(180deg,var(--paper),#f2eee7 18%,#f2eee7 82%,var(--paper))}
.lens-wrap{position:relative;justify-self:center;width:min(100%,640px)}
.lens{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;isolation:isolate;box-shadow:0 40px 80px -40px #8b784f88,0 0 0 1px #d9c9a4;transform:scale(calc(.86 + clamp(0,var(--p) * 2.4,1) * .14))}
.lens-img{position:absolute;left:0;top:0;height:100%;aspect-ratio:3/2;background:url('/assets/white-witch-muse.png') center/100% 100% no-repeat;transform-origin:0 0;will-change:transform}
.lens-flare{position:absolute;inset:0;background:radial-gradient(circle at 30% 22%,#fff9 0,transparent 36%),linear-gradient(120deg,transparent 40%,#fff6 50%,transparent 60%);mix-blend-mode:screen;opacity:calc(.7 - var(--p) * .3)}
.lens-ring{position:absolute;inset:-3.5%;width:107%;height:107%;pointer-events:none;overflow:visible;transform:rotate(calc(var(--p) * 150deg))}
.lens-ring circle{fill:none;stroke:#c9ad6d}.lr1{stroke-width:.35;opacity:.7}.lr2{stroke-width:.6;stroke-dasharray:calc(var(--p) * 1) 1}
.muse-copy{padding:20px 6% 20px 8%}.muse-copy h2{font-size:clamp(52px,5.4vw,86px);line-height:1.07;margin:30px 0}.muse-copy>p:not(.eyebrow){color:var(--muted);font-size:11px;margin-bottom:22px;line-height:2}

/* ───────── 6 · FINALE: the three talismans return as medallions and fold into a ring around the closing words ───────── */
.finale{--p:.5;position:relative;isolation:isolate;text-align:center;min-height:900px;padding:150px 8% 100px;display:grid;place-items:center;overflow:hidden}
.orbit{position:absolute;left:50%;top:50%;width:min(94vw,760px);aspect-ratio:1;transform:translate(-50%,-50%);z-index:-1}
.orbit-ring{position:absolute;inset:calc(15% - var(--rr,0) * 9%);border-radius:50%;border:1px solid #b69c7144;box-shadow:0 0 0 38px #b69c7109,0 0 0 90px #b69c7105;transform:rotate(calc(var(--p) * 90deg))}
.med{position:absolute;left:50%;top:50%;width:21%;aspect-ratio:1;margin:-10.5%;border-radius:50%;background:url('/assets/white-witch-talismans.png') var(--mx) var(--my)/520% auto no-repeat;box-shadow:0 18px 40px -18px #8b784f80,0 0 0 2px #fffd,0 0 0 3px #d4bd86;transform:translate3d(var(--x,0),var(--y,0),0) scale(var(--s,1)) rotate(var(--r,0deg));will-change:transform}
.med1{--mx:10.3%;--my:40.9%}.med2{--mx:47.7%;--my:34.5%}.med3{--mx:89.6%;--my:41.6%}
.finale-copy{position:relative;z-index:3}.finale h2{font-size:clamp(84px,10vw,152px);line-height:.94;margin:40px 0}

footer{position:relative;z-index:8;display:flex;justify-content:space-between;align-items:center;gap:30px;padding:45px 6%;border-top:1px solid #b7a58733;background:var(--paper)}footer .wordmark{font-size:29px}footer p{font:italic 23px Editorial;color:#9d8864}footer>span{font-size:8px;color:#928675}

/* ───────── enlarged preview (native dialog; unchanged behaviour) ───────── */
dialog{padding:0;border:1px solid #d4c9b7;background:var(--paper);color:var(--ink);width:850px;max-width:calc(100% - 30px);max-height:calc(100dvh - 30px);overflow:auto;box-shadow:0 25px 100px #77674b40}dialog[open]{display:grid;grid-template-columns:1fr 1fr}dialog::backdrop{background:#75675266;backdrop-filter:blur(8px)}
.dialog-art{align-self:center;box-shadow:none;border-radius:0!important;aspect-ratio:5/7.2}.dialog-art .layer{transform:none!important;filter:none!important}.dialog-copy{padding:65px 38px 40px}.dialog-copy h2{font-size:48px;line-height:1.1;margin:25px 0}.dialog-copy>p:not(.eyebrow){font-size:12px;color:var(--muted);margin-bottom:25px}.dialog-copy .dialog-note{font-size:10px;border-top:1px solid #cdbfaa60;padding-top:25px}
.dialog-close{position:absolute;top:8px;right:8px;width:44px;height:44px;border:none;background:#fffc;color:#6e634f;z-index:2}.dialog-return{background:none;border:0;border-bottom:1px solid #bba887;padding:12px 0;min-height:44px;font-size:10px}.dialog-open{overflow:hidden}

/* ambient life: only inside the scene that is on screen, never while paused */
@keyframes tw{0%,100%{opacity:.55}50%{opacity:1}}
.live .glint:before,.live .glint:after,.live .twinkle:before,.live .twinkle:after{animation:tw 2.6s ease-in-out infinite}.live .twinkle:after,.live .glint:after{animation-delay:-1.3s}
.motion-paused *,.motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important}.motion-paused .rise,.motion-paused .reveal,.motion-paused .spell-words .word{opacity:1;transform:none;transition:none}

/* ───────── tablet / phone ───────── */
@media(max-width:1000px){.hero-copy{padding-left:7%}.hero-copy h1{font-size:94px}.spread{gap:4%;padding:80px 5%}.talisman-title{font-size:46px}.muse{grid-template-columns:1fr 1fr}.muse-copy h2{font-size:58px}}
@media(max-width:820px){
.spread{grid-template-columns:1fr;gap:34px;padding:56px 7% 70px;justify-items:center}.spread.flip .plate-wrap{order:0}.plate-wrap{width:min(88vw,400px)}.spread-copy,.spread.flip .spread-copy{justify-self:center;max-width:400px;text-align:left;width:min(88vw,400px)}
.spread-pearl .plate-wrap{transform-origin:50% 0}.orbs{inset:-8% -14%}
.muse{grid-template-columns:1fr;gap:34px;padding:50px 6% 70px}.lens-wrap{width:min(88vw,420px)}.muse-copy{padding:0 4%}.muse-copy h2{font-size:64px}
}
@media(max-width:700px){
.witch-header{top:77px;left:6%;right:6%;gap:10px}.wordmark{font-size:29px}.wordmark small{font-size:5px}.header-note{display:none}.motion-toggle{right:12px;bottom:12px;font-size:8px;padding:7px 12px}
.hero{height:auto;min-height:0;max-height:none;padding-top:0;display:flex;flex-direction:column}.hero-intro{height:min(68svh,620px);bottom:auto}.hero-img{background-position:76% 14%;transform-origin:74% 34%}
.hero-veil{background:linear-gradient(0deg,var(--paper) 2%,transparent 36%)}
.hero-copy{padding:calc(min(68svh,620px) - 52px) 7% 70px;max-width:100%}.hero-copy h1{font-size:clamp(65px,16vw,105px);margin:19px 0 20px;line-height:.92}.hero-copy h1 br:last-child{display:none}.hero-copy .eyebrow{font-size:6px;letter-spacing:2px}.chapter-label{margin-top:14px;font-size:8px;letter-spacing:4px}.hero-description{font-size:10px}.round-link{font-size:8px;gap:20px;margin-top:20px}.round-link b{width:42px;height:42px;font-size:18px}.hero-footnote{position:static;display:block;padding:0 7% 28px;font-size:5px;letter-spacing:1px}.side-note{display:none}
.hero-frame{clip-path:inset(calc(var(--p) * 4%) calc(var(--p) * 7%) 0 calc(var(--p) * 7%) round calc(var(--p) * 30%) calc(var(--p) * 30%) 0 0)}
.hero-copy{opacity:calc(1 - var(--p) * 1.15)}
.eyebrow{font-size:6px;letter-spacing:1.7px}.soft-copy{font-size:10px}
.awakening{padding:110px 6% 90px;min-height:680px}.awakening h2{font-size:clamp(36px,8.6vw,58px);margin:30px 0;line-height:1.15}.ritual-wrap{width:118vw}
.edit-head{padding:60px 7% 10px}.section-heading{display:block}.section-heading h2{font-size:64px;margin-top:19px}.section-heading>p{font-size:10px;margin-top:22px}
.card-number{font-size:6px;margin-bottom:16px}.talisman-title{font-size:44px}.talisman-caption{font-size:21px}.plate-tag{font-size:5.5px}
.chain-hang{height:62px}
.flight{min-height:720px;padding:90px 6%}.flight h2{font-size:clamp(52px,12.5vw,88px);margin:30px 0}.cast-button{font-size:9px;padding:15px 20px}.cast-button span{padding-left:18px}.spell-status{font-size:17px}
.lens{box-shadow:0 26px 50px -26px #8b784f88,0 0 0 1px #d9c9a4}
.finale{min-height:720px;padding:110px 5% 70px}.finale h2{font-size:clamp(73px,17.5vw,115px);margin:35px 0}.orbit{width:130vw}
footer{flex-direction:column;padding:35px 6%;gap:22px}footer p{font-size:22px}footer>span{font-size:7px}
dialog[open]{grid-template-columns:1fr}.dialog-art{width:min(100%,270px);justify-self:center;margin-top:34px}.dialog-copy{padding:25px}.dialog-copy h2{font-size:40px;margin:15px 0}.dialog-copy>p:not(.eyebrow){font-size:11px;margin-bottom:18px}.dialog-copy .dialog-note{font-size:9px;padding-top:18px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js .rise,.js .reveal,.spell-words .word{opacity:1;transform:none}}