@font-face{font-family:"Fraunces";src:url(/fonts/fraunces.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/fonts/fraunces-italic.woff2) format("woff2");font-weight:400 800;font-style:italic;font-display:swap}
:root{--ink:#1c1626;--muted:#5d5669;--bg:#fbf7f1;--paper:#fffdf9;--line:rgba(40,25,60,.12);--brand:#7b2cbf;--radius:22px;
--shadow:0 1px 2px rgba(28,22,38,.06),0 8px 24px rgba(28,22,38,.08),0 24px 60px -20px rgba(60,30,90,.18);
--shadow-lg:0 2px 4px rgba(28,22,38,.08),0 18px 40px rgba(28,22,38,.12),0 40px 90px -30px rgba(80,30,120,.35);
--display:"Fraunces",Georgia,"Times New Roman",serif;--sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--crimson:#c8102e;--cobalt:#0047ab;--amber:#ff9f1c;--coral:#ff6f61;--emerald:#00875a;--violet:#7b2cbf;--gold:#d4a017;--sage:#6b8f71;
--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:17px/1.7 var(--sans);color:var(--ink);background:var(--bg);position:relative;overflow-x:hidden}
body:before{content:"";position:fixed;inset:-20vmax;z-index:-2;background:radial-gradient(40vmax 30vmax at 8% 0%,rgba(255,111,97,.16),transparent 60%),radial-gradient(38vmax 30vmax at 100% 12%,rgba(123,44,191,.13),transparent 60%),radial-gradient(40vmax 34vmax at 30% 100%,rgba(0,135,90,.10),transparent 60%),radial-gradient(30vmax 26vmax at 90% 90%,rgba(255,159,28,.12),transparent 60%)}
body:after{content:"";position:fixed;inset:0;z-index:-1;background-image:var(--grain);opacity:.18;pointer-events:none;mix-blend-mode:multiply}
img,video{max-width:100%;height:auto;display:block}picture{display:block}
a{color:#5a1e95;text-decoration-thickness:1px;text-underline-offset:3px}a:hover{color:#c8102e}
h1,h2,h3,h4{font-family:var(--display);line-height:1.08;font-weight:650;letter-spacing:-.015em;font-variation-settings:"opsz" 72}
h1{font-size:clamp(2.3rem,6vw,4.4rem);margin:.35em 0 .25em}h2{font-size:clamp(1.65rem,3.4vw,2.5rem);margin:1.6em 0 .5em}h3{font-size:1.32rem;margin:1.3em 0 .4em}
h1 em,h2 em{font-style:italic;font-weight:500}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}.wrap-wide{max-width:1320px;margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:#fff;padding:8px;z-index:99}
:focus-visible{outline:3px solid #7b2cbf;outline-offset:3px;border-radius:6px}
.site-header{position:sticky;top:0;z-index:40;background:rgba(251,247,241,.72);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:66px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--display);font-size:1.12rem;font-weight:600}
.brand b{font-style:italic;background:linear-gradient(90deg,#c8102e,#ff9f1c 30%,#00875a 55%,#0047ab 75%,#7b2cbf);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand img{animation:spin 30s linear infinite}
.nav{display:flex;gap:2px;flex-wrap:wrap}.nav a,.nav-mobile a{padding:7px 11px;border-radius:999px;text-decoration:none;color:var(--ink);font-size:.93rem;font-weight:600}
.nav a:hover,.nav a[aria-current]{background:rgba(123,44,191,.09);color:#4b1b7c}
.menu{display:none}.menu summary{list-style:none;cursor:pointer;width:42px;height:42px;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:9px}.menu summary::-webkit-details-marker{display:none}.menu summary span{display:block;height:2.5px;background:var(--ink);border-radius:2px}
.nav-mobile{position:absolute;right:12px;top:62px;background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;padding:10px;min-width:240px}
@media (max-width:1020px){.nav{display:none}.menu{display:block}}
main{padding-bottom:64px;min-height:60vh}
.crumbs{font-size:.86rem;color:var(--muted);margin:18px 0 0}.crumbs a{color:var(--muted)}
.lede{font-size:1.22rem;color:var(--muted);max-width:760px}
.kicker{font:700 .78rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.btn{position:relative;display:inline-flex;align-items:center;gap:8px;background:linear-gradient(120deg,#2a1840,#1c1626 60%);color:#fff;text-decoration:none;padding:14px 24px;border-radius:999px;font-weight:700;border:0;cursor:pointer;font-size:1rem;box-shadow:0 10px 30px -10px rgba(40,10,70,.6);overflow:hidden;transition:transform .2s,box-shadow .2s}
.btn:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s}
.btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(40,10,70,.7)}.btn:hover:after{transform:translateX(120%)}
.btn.alt{background:rgba(255,255,255,.7);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}.btn.alt:hover{color:var(--ink);background:#fff}
.btn.glow{background:linear-gradient(120deg,#c8102e,#ff6f61 35%,#ff9f1c 60%,#7b2cbf);background-size:200% 100%;animation:sheen 8s ease infinite}
.btn.light{background:#fff;color:var(--ink)}.btn.light:hover{color:var(--ink)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}
.grid{display:grid;gap:20px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}@media (max-width:580px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);isolation:isolate}.card h3{margin-top:0}
.card.layer:before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;background:linear-gradient(135deg,var(--c,#7b2cbf),var(--c2,#ff6f61));transform:rotate(-2.2deg) translate(6px,8px);opacity:.55;filter:blur(.3px)}
a.card{text-decoration:none;color:var(--ink);display:block;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}a.card:hover{transform:translateY(-5px) rotate(-.3deg);box-shadow:var(--shadow-lg)}
a.card picture,a.card img{border-radius:14px;overflow:hidden}
.swatch{display:block;height:84px;border-radius:12px;margin-bottom:12px;position:relative;overflow:hidden}
.color-chip{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:middle;margin-right:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.pill{display:inline-block;padding:3px 11px;border-radius:999px;background:rgba(123,44,191,.1);color:#4b1b7c;font-size:.8rem;font-weight:700;margin:2px 4px 2px 0}
.note{background:linear-gradient(135deg,#fff8e6,#fff3f0);border:1px solid #f1dfa6;border-radius:16px;padding:14px 18px;font-size:.96rem}.note.blue{background:linear-gradient(135deg,#eef4ff,#f4efff);border-color:#c9d8f7}
article.prose{max-width:780px}.prose p,.prose li{max-width:72ch}.prose img,.prose picture{border-radius:16px;overflow:hidden}
.prose figure{margin:26px 0}figcaption{font-size:.85rem;color:var(--muted);margin-top:6px}
.byline{color:var(--muted);font-size:.92rem}
.toc{background:rgba(255,255,255,.6);border:1px solid var(--line);border-radius:16px;padding:14px 18px;margin:18px 0}.toc ol{margin:6px 0 0;padding-left:20px}
.sources{font-size:.92rem;border-top:2px solid var(--line);margin-top:36px;padding-top:8px}.sources li{margin:6px 0;word-break:break-word}
.table-wrap{overflow-x:auto;margin:16px 0;border-radius:14px;box-shadow:var(--shadow)}table{border-collapse:collapse;width:100%;font-size:.95rem;background:var(--paper)}th,td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}th{background:#f4eee6;font-family:var(--display);font-weight:600}
blockquote{margin:16px 0;padding:8px 20px;border-left:4px solid var(--brand);background:rgba(255,255,255,.6);border-radius:0 14px 14px 0}
.faq details{border:1px solid var(--line);border-radius:16px;padding:14px 18px;margin:10px 0;background:var(--paper);box-shadow:0 1px 2px rgba(0,0,0,.03)}.faq summary{font-weight:700;cursor:pointer}
.site-footer{position:relative;background:#140f1c;color:#d9d5e6;padding:56px 0 22px;font-size:.95rem;overflow:hidden}.site-footer:before{content:"";position:absolute;inset:0;background:radial-gradient(50% 80% at 0% 0%,rgba(200,16,46,.25),transparent 60%),radial-gradient(40% 70% at 100% 100%,rgba(123,44,191,.3),transparent 60%);pointer-events:none}
.site-footer a{color:#fff}.footer-grid{position:relative;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px}.footer-grid ul{list-style:none;padding:0;margin:0}.footer-grid li{margin:5px 0}.foot-h{font-weight:800;color:#fff}.brand-foot{font-family:var(--display);font-size:1.4rem;color:#fff;margin:0 0 8px}.legal{position:relative;border-top:1px solid #3a3746;margin-top:26px;padding-top:16px;font-size:.85rem;color:#aaa5bd}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr}}
/* ---------- hero ---------- */
.vhero{position:relative;min-height:min(88vh,820px);display:grid;align-items:end;color:#fff;border-radius:0 0 36px 36px;overflow:hidden;margin:0 calc(50% - 50vw);isolation:isolate;background:#1a1024}
.vhero .bg,.vhero video,.vhero picture,.vhero picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.vhero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,10,30,.15) 0%,rgba(20,10,30,.2) 40%,rgba(20,10,30,.85) 100%),var(--grain);background-size:auto,160px;opacity:1}
.vhero .inner{padding:0 22px 56px;max-width:1140px;margin:0 auto;width:100%}
.vhero h1{font-size:clamp(2.6rem,7.5vw,5.6rem);max-width:13ch;margin:.15em 0;text-shadow:0 4px 40px rgba(0,0,0,.35)}
.vhero .lede{color:rgba(255,255,255,.88);font-size:clamp(1.05rem,2vw,1.3rem)}
.vhero .pill{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(6px)}
.vhero .btn.alt{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.8)}
.hero-wheel{position:absolute;right:-90px;top:50%;transform:translateY(-50%);width:min(46vw,560px);opacity:.92;z-index:-1;filter:drop-shadow(0 30px 60px rgba(0,0,0,.45))}
@media (max-width:820px){.hero-wheel{display:none}.vhero{min-height:76vh}}
.wheel .wl{font:600 17px var(--display);fill:#fff;letter-spacing:.02em}.wheel .hub{fill:rgba(255,255,255,.92)}
.wheel-rot{transform-origin:260px 260px;animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes sheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* ---------- color strip & tiles ---------- */
.color-rail{display:grid;grid-template-columns:repeat(8,1fr);gap:12px;margin:34px 0}
@media (max-width:900px){.color-rail{grid-template-columns:repeat(4,1fr)}}@media (max-width:520px){.color-rail{grid-template-columns:repeat(2,1fr)}}
.ctile{position:relative;display:block;aspect-ratio:3/4.4;border-radius:22px;overflow:hidden;color:#fff;text-decoration:none;box-shadow:var(--shadow);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.ctile picture,.ctile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s}
.ctile:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,var(--c0) 100%);opacity:.92}
.ctile span{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;line-height:1.15}.ctile b{display:block;font:650 1.35rem var(--display)}.ctile small{opacity:.9}
.ctile:hover{transform:translateY(-6px) rotate(-1deg);color:#fff}.ctile:hover img{transform:scale(1.08)}
/* ---------- color page ---------- */
.chero{position:relative;margin:18px -22px 0;border-radius:36px;overflow:hidden;color:#fff;min-height:440px;display:grid;align-items:end;isolation:isolate;background:var(--c0)}
.chero .film,.chero .film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.chero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.05) 70%),var(--grain);background-size:auto,160px}
.chero .inner{padding:44px 40px}.chero h1{margin:.1em 0;font-size:clamp(2.6rem,7vw,5.2rem);text-shadow:0 2px 30px rgba(0,0,0,.25)}.chero p{font-size:1.2rem;max-width:640px}
.mood-words{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:16px 0 0}.mood-words li{padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);font-weight:600;font-size:.92rem;border:1px solid rgba(255,255,255,.35)}
.moodboard{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:14px;margin:30px 0}
.moodboard .mb{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);background:var(--c3)}
.moodboard .mb picture,.moodboard .mb img{width:100%;height:100%;object-fit:cover}
.moodboard .t1{grid-column:span 2;grid-row:span 2}.moodboard .t2{grid-row:span 2}.moodboard .t5{grid-column:span 2}.moodboard .t6{grid-row:span 2}.moodboard .t8{grid-column:span 2}
.moodboard .mb:nth-child(odd){transform:rotate(-.6deg)}.moodboard .mb:nth-child(3n){transform:rotate(.8deg)}
@media (max-width:700px){.moodboard{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px}.moodboard .t5,.moodboard .t8{grid-column:span 2}}
.vibe{padding:20px;height:100%;color:#fff;background:linear-gradient(150deg,var(--c),var(--c0));display:flex;flex-direction:column;justify-content:center}.vibe b{font:600 1.1rem var(--display);display:block;margin-bottom:4px}.vibe p{margin:0;font-size:.93rem;line-height:1.5;opacity:.95}
.quote-card{margin:0;height:100%;padding:26px;border-radius:20px;color:#fff;background:radial-gradient(120% 120% at 0% 0%,var(--c3),transparent 50%),linear-gradient(140deg,var(--c1),var(--c2));display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.quote-card:before{content:"\201C";position:absolute;top:-30px;left:10px;font:700 9rem var(--display);opacity:.25}
.quote-card blockquote{margin:0;padding:0;border:0;background:none;font:italic 500 clamp(1.15rem,2.2vw,1.55rem)/1.3 var(--display)}.quote-card figcaption{color:rgba(255,255,255,.85);margin-top:10px}
.palette{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;list-style:none;padding:0;margin:18px 0}
.palette .sw{all:unset;cursor:pointer;display:block;width:100%;border-radius:18px;overflow:hidden;background:var(--paper);box-shadow:var(--shadow);transition:transform .3s}
.palette .sw:hover,.palette .sw:focus-visible{transform:translateY(-4px)}.palette .chip{display:block;height:84px;background:var(--c)}.palette.big .chip{height:130px}
.palette b,.palette code{display:block;padding:0 12px;font-size:.86rem}.palette b{padding-top:9px;font-family:var(--display);font-weight:600}.palette code{padding-bottom:10px;color:var(--muted)}
@media (max-width:560px){.palette{grid-template-columns:repeat(5,1fr);gap:6px}.palette b{font-size:.7rem;padding:6px 6px 0}.palette code{font-size:.68rem;padding:0 6px 8px}.palette .chip{height:60px}}
.section-band{position:relative;margin:48px -22px;padding:48px 22px;border-radius:36px;background:linear-gradient(160deg,var(--c3,#f3ebfc),transparent 70%),var(--paper);box-shadow:var(--shadow)}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}@media (max-width:820px){.split{grid-template-columns:1fr}}
.stack{position:relative}.stack picture:nth-child(2){position:absolute;width:55%;right:-10px;bottom:-30px;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg);transform:rotate(3deg);border:6px solid #fff}
.stack picture:first-child{border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}
.shade-card{display:flex;gap:14px;align-items:center}.shade-card i{flex:0 0 58px;height:58px;border-radius:16px;background:var(--c);box-shadow:inset 0 0 0 3px rgba(255,255,255,.5),var(--shadow)}
.affil{border:1px dashed rgba(123,44,191,.35);background:rgba(255,255,255,.55)}
/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
/* ---------- quiz ---------- */
.quiz-shell{max-width:800px;margin:24px auto}
.progress{height:12px;background:rgba(40,25,60,.08);border-radius:99px;overflow:hidden;position:relative}
.progress i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#c8102e,#ff6f61,#ff9f1c,#d4a017,#00875a,#6b8f71,#0047ab,#7b2cbf);background-size:800px 100%;transition:width .6s cubic-bezier(.2,.8,.2,1);position:relative}
.progress i:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:shimmer 1.8s infinite}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.qcard{background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:28px;box-shadow:var(--shadow-lg);margin-top:18px;animation:qin .5s cubic-bezier(.2,.8,.2,1)}
@keyframes qin{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.qcard h2{margin-top:0;font-size:clamp(1.4rem,3vw,1.9rem)}
.qpics{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0 6px}.qpics button{all:unset;cursor:pointer;border-radius:20px;overflow:hidden;position:relative;aspect-ratio:4/3;box-shadow:var(--shadow);transition:transform .3s}
.qpics button:hover,.qpics button:focus-visible{transform:scale(1.02)}.qpics img{width:100%;height:100%;object-fit:cover}.qpics span{position:absolute;left:10px;right:10px;bottom:10px;color:#fff;font-weight:700;font-size:.92rem;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.scale{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}.scale button{border:2px solid var(--line);background:#fff;border-radius:16px;padding:14px 8px;cursor:pointer;font:inherit;font-size:.92rem;line-height:1.3;min-height:84px;transition:all .2s}
.scale button:hover,.scale button:focus{border-color:var(--brand);background:#faf6ff;transform:translateY(-2px)}.scale button.sel{border-color:var(--brand);background:#f0e6fb}
.ends{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px;font-weight:700}.ends span:last-child{text-align:right}
@media (max-width:560px){.scale{grid-template-columns:1fr 1fr}.ends{font-size:.92rem}}
.qnav{display:flex;justify-content:space-between;margin-top:16px}.linkbtn{background:none;border:0;color:#5a1e95;font:inherit;cursor:pointer;text-decoration:underline;padding:6px}
.timer{height:6px;border-radius:9px;background:rgba(0,0,0,.08);overflow:hidden;margin:10px 0}.timer i{display:block;height:100%;background:linear-gradient(90deg,#ff9f1c,#c8102e);width:100%}
/* ---------- result reveal ---------- */
.stage{position:relative;margin:0 calc(50% - 50vw);min-height:92vh;border-radius:0 0 40px 40px;overflow:hidden;color:#fff;display:grid;place-items:center;isolation:isolate;background:radial-gradient(80% 60% at 50% 40%,#3a2350,#120b19)}
.stage .film,.stage .film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:0;transition:opacity 1.4s}
.stage.revealed .film,.stage.revealed .film video{opacity:1}
.stage:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 60% at 50% 50%,transparent,rgba(10,5,15,.6)),var(--grain);background-size:auto,160px}
.stage .spin-wrap{position:absolute;width:min(78vw,520px);aspect-ratio:1;transition:transform 1.2s cubic-bezier(.2,.8,.2,1),opacity 1s}
.stage .spin-wrap .wheel{width:100%;height:auto}.stage .spin-wrap .wheel-rot{animation:none}
.stage.revealed .spin-wrap{transform:scale(.38) translateY(-120%);opacity:.0}
.stage .burst{position:absolute;width:20px;height:20px;border-radius:50%;background:var(--c);transform:scale(0);opacity:.9;z-index:-1}
.stage.revealed .burst{animation:burst 1.4s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes burst{to{transform:scale(140);opacity:0}}
.stage .reveal-text{text-align:center;padding:0 22px;opacity:0;transform:translateY(30px) scale(.96);transition:all 1s cubic-bezier(.2,.8,.2,1) .5s}
.stage.revealed .reveal-text{opacity:1;transform:none}
.stage h1{font-size:clamp(3rem,10vw,7rem);margin:.1em 0}.stage .shade{font:italic 500 clamp(1.2rem,3vw,1.8rem) var(--display)}
.stage .mood-words{justify-content:center}
.skip-anim{position:absolute;bottom:18px;right:18px;background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:6px 12px;font:inherit;font-size:.85rem;cursor:pointer}
.dials{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}@media (max-width:640px){.dials{grid-template-columns:1fr}}
.dial{margin:0;background:var(--paper);border-radius:22px;padding:16px 16px 12px;box-shadow:var(--shadow);text-align:center;position:relative}
.dial svg{width:100%;max-width:240px;margin:auto}.dial .track{fill:none;stroke:rgba(40,25,60,.1);stroke-width:16;stroke-linecap:round}.dial .fill{fill:none;stroke:var(--c);stroke-width:16;stroke-linecap:round;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1)}
.dial .needle{transform-origin:100px 100px;transition:transform 1.6s cubic-bezier(.3,1.4,.4,1)}.dial .needle line{stroke:var(--ink);stroke-width:4;stroke-linecap:round}.dial .needle circle{fill:var(--ink)}
.dial figcaption{display:flex;justify-content:space-between;font-size:.85rem;color:var(--muted);margin-top:-4px}.dial figcaption b{font-family:var(--display);color:var(--ink);font-size:1.05rem}
.dial output{position:absolute;top:12px;right:16px;font:700 .85rem var(--sans);color:var(--muted)}
.sharekit{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:end}.sharekit figure{margin:0;text-align:center}.sharekit canvas{width:100%;height:auto;border-radius:16px;box-shadow:var(--shadow-lg);background:#eee}
.sharekit figcaption{margin-top:8px}.sharekit .btn{padding:10px 16px;font-size:.9rem;margin-top:8px}
@media (max-width:640px){.sharekit{grid-template-columns:1fr 1fr}.sharekit figure:first-child{grid-row:span 2}}
.share{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.share a,.share button{font-size:.9rem;padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;cursor:pointer;font-weight:600}
.price{font:650 2.4rem var(--display)}.price s{font-size:1.3rem;color:var(--muted);margin-right:10px;font-weight:400}
/* bars (legacy) */
.bars{margin:16px 0}.bar{margin:10px 0}.bar .lab{display:flex;justify-content:space-between;font-size:.9rem;font-weight:700}.bar .track{height:12px;background:#eee8f6;border-radius:99px;position:relative}.bar .track i{position:absolute;top:-3px;width:18px;height:18px;border-radius:50%;background:var(--ink);transform:translateX(-50%);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.result-hero{border-radius:28px;padding:34px 28px;margin-top:20px;position:relative;overflow:hidden}.result-hero h1{margin:.1em 0}
/* pairs */
.pair-hero{position:relative;margin:18px -22px 0;border-radius:36px;overflow:hidden;min-height:360px;color:#fff;display:grid;align-items:end;isolation:isolate}
.pair-hero .a,.pair-hero .b{position:absolute;inset:0;z-index:-2}.pair-hero .a picture,.pair-hero .b picture,.pair-hero img{width:100%;height:100%;object-fit:cover}
.pair-hero .b{clip-path:polygon(58% 0,100% 0,100% 100%,42% 100%)}.pair-hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 70%)}
.pair-hero .inner{padding:36px 38px}.matrix{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;font-size:.78rem}.matrix a,.matrix span{display:grid;place-items:center;aspect-ratio:1;border-radius:10px;text-decoration:none;color:#fff;font-weight:700}
.matrix a{background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%);transition:transform .2s}.matrix a:hover{transform:scale(1.12);z-index:2}.matrix span{color:var(--ink)}
@media (max-width:600px){.matrix{font-size:.55rem;gap:2px}}
/* aura */
.aura-card{border-radius:28px;overflow:hidden;position:relative;box-shadow:var(--shadow-lg);color:#fff}.aura-card picture,.aura-card img{width:100%}.aura-card .cap{position:absolute;left:0;right:0;bottom:0;padding:22px;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent)}
.aura-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}@media (max-width:640px){.aura-choices{grid-template-columns:1fr 1fr}}
.aura-choices button{all:unset;cursor:pointer;border-radius:20px;overflow:hidden;position:relative;aspect-ratio:1;box-shadow:var(--shadow);transition:transform .3s}.aura-choices button:hover,.aura-choices button:focus-visible{transform:scale(1.04)}.aura-choices img{width:100%;height:100%;object-fit:cover}.aura-choices span{position:absolute;inset:auto 8px 8px;color:#fff;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.6);font-size:.95rem}
/* characters */
.char-card{border-radius:24px;overflow:hidden;background:var(--paper);box-shadow:var(--shadow);position:relative}.char-card .art{height:150px;position:relative;background:var(--g)}.char-card .art:after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.35}
.char-card .art b{position:absolute;left:18px;bottom:12px;color:#fff;font:650 1.5rem var(--display);text-shadow:0 2px 12px rgba(0,0,0,.3);z-index:1}.char-card .body{padding:16px 18px}
/* kids */
.kids .qcard{border-width:3px}.kid-choice{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.kid-choice button{font:inherit;font-size:1.05rem;border:3px solid var(--line);background:#fff;border-radius:22px;padding:18px;cursor:pointer;transition:transform .2s}.kid-choice button b{display:block;font-size:2.4rem}.kid-choice button:hover{border-color:var(--amber);background:#fff8ec;transform:rotate(-1deg) scale(1.02)}
.kids-banner{background:linear-gradient(90deg,#e9f7ef,#f3f9ff);border-bottom:1px solid #c6e9d4;font-size:.92rem;padding:8px 0}
.mascot{width:120px;height:120px;animation:bob 3.2s ease-in-out infinite}.mascot .eye{animation:blink 4s infinite;transform-origin:center;transform-box:fill-box}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.kid-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}@media (max-width:700px){.kid-tiles{grid-template-columns:repeat(2,1fr)}}
.kid-tiles a{background:var(--paper);border-radius:24px;padding:14px;text-align:center;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);border-top:8px solid var(--c);transition:transform .3s}.kid-tiles a:hover{transform:translateY(-4px) rotate(-1deg)}
form.inline{display:flex;gap:8px;flex-wrap:wrap}form.inline input[type=email],form.inline input[type=text]{flex:1;min-width:220px;padding:12px 16px;border-radius:999px;border:1px solid #cfc8bd;font:inherit;background:#fff}
select,input[type=number],input[type=text]{font:inherit;padding:9px 12px;border-radius:12px;border:1px solid #cfc8bd;background:#fff}
.post-list{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.post-list img{border-radius:14px;aspect-ratio:1200/630;object-fit:cover}
.timeline{border-left:4px solid #e7dcf6;padding-left:20px;margin:20px 0}.timeline .t{margin:0 0 20px;position:relative}.timeline .t:before{content:"";position:absolute;left:-29px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--brand)}.timeline .yr{font-weight:800;color:#5a1e95}
.printable{background:#fff;border:2px dashed #cfc8bd;border-radius:18px;padding:24px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#1c1626;color:#fff;padding:10px 18px;border-radius:999px;z-index:99;font-weight:600;box-shadow:var(--shadow-lg)}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}
@media print{.site-header,.site-footer,.kids-banner,.no-print,.crumbs,.share,.btn-row{display:none!important}body{background:#fff;font-size:12pt}body:before,body:after{display:none}main{padding:0}.printable{border:0;padding:0}.result-card{box-shadow:none!important}a{color:inherit;text-decoration:none}}
/* ---------- v2 additions ---------- */
.moodboard{grid-auto-flow:dense}
.vhero video{opacity:0;transition:opacity 1.6s ease}.vhero video.ready{opacity:1}
.vhero .inner{position:relative;z-index:1}
.mascot-parade{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;margin:22px 0 26px}
.mascot-parade a{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--ink);font-weight:700;font-size:.85rem;width:110px;text-align:center}
.mascot-parade a .mascot{animation-delay:inherit}
.kid-tiles{margin:10px 0 28px}.kid-tiles picture{border-radius:16px;overflow:hidden}
.story .story-p{font-size:1.18rem;line-height:1.8}
.story h1{color:var(--c)}
.poster-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin:20px 0}@media (max-width:640px){.poster-grid{grid-template-columns:1fr}}
.poster{position:relative;border-radius:28px;padding:28px 26px;text-align:center;color:#1c1626;background:radial-gradient(90% 60% at 50% 0%,var(--c3),transparent 70%),#fff;border:6px solid var(--c);box-shadow:var(--shadow);overflow:hidden;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.poster h2{margin:.2em 0;color:var(--c0);font-size:2.2rem}.poster-text{font-size:1.2rem;line-height:1.6}.poster-foot{font-size:.8rem;color:var(--muted);margin-top:16px}
.poster-top{display:flex;justify-content:center}
@media print{.poster-grid{display:block}.poster{page-break-after:always;break-after:page;min-height:9.4in;box-shadow:none;display:flex;flex-direction:column;justify-content:center}.poster .mascot{width:260px;height:260px;animation:none}.poster h2{font-size:3rem}.poster-text{font-size:1.6rem}}
.team-room{padding:20px 0}.team-room #team-wheel{width:100%;max-width:520px;display:block;margin:auto}.team-room .petal{transition:all .8s cubic-bezier(.2,.8,.2,1)}
.legend{list-style:none;padding:0;columns:2}.legend li{margin:4px 0}
.join-color{border:0;min-height:96px;transition:transform .2s}.join-color:hover{transform:translateY(-3px)}
.aura-glow{animation:auraGlow 6s ease-in-out infinite}
@keyframes auraGlow{0%,100%{box-shadow:0 0 60px -10px rgba(123,44,191,.35)}50%{box-shadow:0 0 90px 0 rgba(255,159,28,.4)}}
.shade-card i{display:block}
.chero .inner{position:relative;z-index:1}
.stage .film video{opacity:inherit}
.matrix{max-width:560px;margin:16px auto}.matrix span{font-size:0}
.matrix a:focus-visible{outline:3px solid #1c1626}
.course-weeks{counter-reset:w}
.card.layer{background:transparent;border-color:transparent}
.card.layer:after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--paper);border:1px solid var(--line);z-index:-1}
a.shade-card{display:flex}
.hero-wheel{z-index:0}.vhero .wheel .hub{fill:rgba(255,255,255,.18)}
.stage{contain:paint}
@keyframes burst{to{transform:scale(140);opacity:0;visibility:hidden}}
.vibe{padding:16px 18px}.vibe p{font-size:.88rem}
/* ---------- v3: people photography ---------- */
.people{margin:56px 0 24px}
.people-head{max-width:640px}.people-head h2{margin:.15em 0 .3em}
.people-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:26px;padding-bottom:44px}
.pcard{position:relative;display:block;aspect-ratio:3/4;border-radius:28px;overflow:hidden;color:#fff;text-decoration:none;isolation:isolate;background:var(--c0);box-shadow:0 2px 0 rgba(255,255,255,.08) inset,0 28px 50px -26px var(--c),0 10px 24px -14px rgba(20,10,30,.45);transition:opacity .9s,transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s}
.pcard:nth-child(even){margin-top:44px}
.pcard .pph,.pcard picture,.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.pcard img{transform:scale(1.04);transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .6s}
.pcard:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 60% at 10% 0%,color-mix(in srgb,var(--c) 38%,transparent),transparent 60%),linear-gradient(180deg,transparent 50%,color-mix(in srgb,var(--c0) 72%,transparent) 76%,var(--c0) 100%);mix-blend-mode:normal}
.pcard:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);pointer-events:none}
.pcard .pmeta{position:absolute;left:0;right:0;bottom:0;padding:20px 20px 18px;display:grid;gap:2px}
.pcard .dot{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px rgba(255,255,255,.25),0 0 18px var(--c)}
.pcard b{font-family:var(--display);font-size:1.6rem;line-height:1.1;margin-top:8px}
.pcard em{font-family:var(--display);font-style:italic;opacity:.92}
.pcard small{font-size:.92rem;line-height:1.35;opacity:.9;margin-top:4px}
.pcard .pwords{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-top:6px}
.pcard:hover,.pcard:focus-visible{transform:translateY(-8px);box-shadow:0 2px 0 rgba(255,255,255,.08) inset,0 40px 70px -26px var(--c),0 16px 30px -14px rgba(20,10,30,.5)}
.pcard:hover img,.pcard:focus-visible img{transform:scale(1.1)}
.people-foot{margin-top:4px}
@media (max-width:1100px){.people-rail{grid-template-columns:repeat(4,minmax(220px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:22px;margin:26px -22px 0;padding:6px 22px 50px;scrollbar-width:none}.people-rail::-webkit-scrollbar{display:none}.pcard{scroll-snap-align:start}}
@media (max-width:700px){.people-rail{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72vw;gap:16px}.pcard:nth-child(even){margin-top:28px}.pcard b{font-size:1.4rem}}
/* photo split sections (quiz CTA, friends, teams) */
.psplit{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center;margin:64px 0;padding:34px;border-radius:36px;background:linear-gradient(150deg,color-mix(in srgb,var(--c3) 70%,#fff),var(--paper,#fbf7f2) 70%);box-shadow:var(--shadow)}
.psplit.flip{grid-template-columns:1.1fr .9fr}.psplit.flip .psplit-ph{order:2}
.psplit-ph{position:relative;margin:-64px 0 -64px;border-radius:30px;overflow:visible;isolation:isolate}
.psplit-ph picture,.psplit-ph img{display:block;width:100%;height:auto;border-radius:30px}
.psplit-ph img{aspect-ratio:4/5;object-fit:cover;box-shadow:0 40px 70px -30px var(--c),0 18px 36px -18px rgba(20,10,30,.5);transform:rotate(-1.2deg)}
.psplit.flip .psplit-ph img{transform:rotate(1.2deg)}
.psplit-ph.wide img{aspect-ratio:3/2}
.psplit-ph:before{content:"";position:absolute;inset:-18px -18px 18px 18px;border-radius:34px;background:radial-gradient(80% 80% at 30% 20%,var(--c),var(--c0));opacity:.85;z-index:-1;transform:rotate(2.5deg)}
.psplit.flip .psplit-ph:before{inset:-18px 18px 18px -18px;transform:rotate(-2.5deg)}
.psplit-ph figcaption{position:absolute;left:18px;bottom:18px;padding:8px 14px;border-radius:999px;background:rgba(15,8,22,.62);backdrop-filter:blur(8px);color:#fff;font-size:.86rem;font-weight:600}
.psplit-body h2{margin:.15em 0 .35em}
.steps{counter-reset:s;list-style:none;padding:0;margin:0 0 18px;display:grid;gap:12px}
.steps li{counter-increment:s;position:relative;padding-left:48px}.steps li:before{content:counter(s);position:absolute;left:0;top:-2px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;font-weight:700;box-shadow:0 8px 18px -8px var(--c)}
.pairs-mini{display:flex;flex-wrap:wrap;gap:8px}.pairs-mini a{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border-radius:999px;background:#fff;box-shadow:var(--shadow);text-decoration:none;color:var(--ink);font-weight:600;font-size:.92rem}
.pairs-mini i{width:26px;height:16px;border-radius:999px;background:linear-gradient(90deg,var(--a) 50%,var(--b) 50%)}
@media (max-width:820px){.psplit,.psplit.flip{grid-template-columns:1fr;gap:26px;padding:22px;margin:48px 0}.psplit.flip .psplit-ph{order:0}.psplit-ph{margin:-40px 6px 0}}
/* color page hero portrait */
.chero-person{position:absolute;top:0;right:0;bottom:0;width:min(42%,460px);z-index:-1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 38%);mask-image:linear-gradient(90deg,transparent,#000 38%)}
.chero-person picture,.chero-person img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
@media (max-width:700px){.chero-person{width:62%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%);opacity:.9}.chero .inner{padding-top:120px}}
@media (prefers-reduced-motion:reduce){.pcard,.pcard img{transition:none}.pcard:hover img{transform:scale(1.04)}}
/* v4: hero video visible on all screens: lighter overlay that only shades the text area */
.vhero:after{background:linear-gradient(90deg,rgba(18,8,28,.62) 0%,rgba(18,8,28,.34) 38%,rgba(18,8,28,0) 66%),linear-gradient(180deg,rgba(18,8,28,0) 55%,rgba(18,8,28,.5) 100%),var(--grain);background-size:auto,auto,160px;opacity:1}
.vhero video{transition:opacity 1.2s ease}
.vhero .hero-wheel{opacity:.92}
@media (max-width:820px){.vhero:after{background:linear-gradient(180deg,rgba(18,8,28,.05) 0%,rgba(18,8,28,0) 30%,rgba(18,8,28,.45) 58%,rgba(18,8,28,.82) 100%),var(--grain);background-size:auto,160px}}
@media (prefers-reduced-motion:reduce){.vhero video{display:none}}
@media (max-width:820px){.vhero{min-height:calc(100svh - 64px)}}