/* Live UI previews inside .stage (ideas & magic). Colours/letters come from --s-* (set from the chosen mood). */
.stage { font-size: 14px; line-height: 1.45; }
.stage h4, .stage h5 { font-family: var(--s-head); font-weight: 500; margin: 0 0 6px; color: inherit; }
.stage h5 { font-size: 1.15rem; }
.stage button { font-family: var(--s-body); cursor: pointer; }
.stage .b1 { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--s-accent); color: var(--s-on); font-weight: 500; font-size: .86rem; text-decoration: none; }
.stage .b2 { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; color: var(--s-accent); background: var(--s-soft); font-size: .86rem; }
.stage .k, .stage .lbl { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; opacity: .7; margin: 0 0 6px; }
.stage .sm { font-size: .8rem; opacity: .75; margin: 8px 0 0; }
.stage .in { animation: pop .45s var(--spring); }
.stage input { font: inherit; font-size: 16px; flex: 1; min-width: 0; height: 42px; border-radius: 999px; border: 1px solid rgba(0,0,0,.12); padding: 0 14px; background: rgba(255,255,255,.85); color: #2a1f33; }
.stage form { display: flex; gap: 6px; margin-top: 10px; }
.stage form button { height: 42px; border: 0; border-radius: 999px; padding: 0 16px; background: var(--s-accent); color: var(--s-on); font-weight: 500; }
.stage .thanks { margin: 12px 0 0; color: var(--s-accent); font-weight: 500; } .stage .thanks small { display: block; font-weight: 400; opacity: .7; color: var(--s-ink); }

/* shared mini page */
.stage .bar { display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 0 14px; position: relative; z-index: 2; }
.stage .lg { font: 500 1.1rem var(--s-head); }
.stage .burg { width: 44px; height: 44px; border: 0; background: none; display: grid; align-content: center; gap: 5px; justify-items: end; color: inherit; }
.stage .burg i { display: block; width: 20px; height: 1.6px; background: currentColor; border-radius: 2px; } .stage .burg i + i { width: 13px; }
.stage .pg { padding: 6px 16px 20px; } .stage .pg-k { font: 400 1.4rem var(--script); color: var(--s-accent); margin: 0; }
.stage .pg-h { font-size: 1.5rem; } .stage .pg-h.swap { animation: pop .45s var(--spring); }
.stage .pg-p { font-size: .85rem; opacity: .8; margin: 0 0 12px; }
.stage .pg-img { height: 92px; border-radius: 14px; background: center 22%/cover; margin-bottom: 12px; }
.stage .ln { display: block; height: 8px; border-radius: 9px; background: currentColor; opacity: .08; margin-bottom: 7px; } .stage .ln.s { width: 60%; }
.stage .scrim { position: absolute; inset: 0; background: rgba(20,10,35,.45); opacity: 0; pointer-events: none; transition: opacity .4s; z-index: 3; }
.stage.open .scrim { opacity: 1; pointer-events: auto; }

/* nav: drawer */
.pv-nav-drawer .drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 72%; z-index: 4; background: var(--s-bg); padding: 56px 18px 18px; display: flex; flex-direction: column; gap: 2px; transform: translateX(105%); transition: transform .5s var(--ease); box-shadow: -20px 0 40px -20px rgba(0,0,0,.35); }
.pv-nav-drawer.open .drawer { transform: none; }
.pv-nav-drawer .drawer a { padding: 9px 4px; border-bottom: 1px solid rgba(127,127,127,.15); font-family: var(--s-head); font-size: 1.05rem; opacity: 0; transform: translateX(14px); transition: .45s var(--ease); transition-delay: calc(var(--i) * 45ms + 120ms); }
.pv-nav-drawer.open .drawer a { opacity: 1; transform: none; }
.pv-nav-drawer .drawer a.cta { margin-top: 12px; border: 0; text-align: center; border-radius: 999px; background: var(--s-accent); color: var(--s-on); font-family: var(--s-body); font-size: .88rem; padding: 11px; }
.stage .x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: none; font-size: 1.6rem; color: inherit; z-index: 2; }
/* nav: tabs */
.pv-nav-tabs .tabpage { height: 252px; overflow: hidden; }
.pv-nav-tabs .tabs { position: absolute; left: 10px; right: 10px; bottom: 10px; display: grid; grid-template-columns: repeat(5, 1fr); padding: 4px; border-radius: 20px; background: var(--s-bg); box-shadow: 0 8px 24px -8px rgba(0,0,0,.35), inset 0 0 0 1px rgba(127,127,127,.15); }
.pv-nav-tabs .tabs .ind { position: absolute; left: 4px; top: 4px; bottom: 4px; width: calc((100% - 8px) / 5); border-radius: 16px; background: var(--s-soft); transition: transform .5s var(--spring); }
.pv-nav-tabs .tabs button { position: relative; border: 0; background: none; color: inherit; height: 52px; display: grid; justify-items: center; align-content: center; gap: 2px; opacity: .6; transition: opacity .3s, color .3s; }
.pv-nav-tabs .tabs button small { font-size: .62rem; } .pv-nav-tabs .tabs button[aria-pressed="true"] { opacity: 1; color: var(--s-accent); }
/* nav: sanctuary */
.pv-nav-sanctuary .sanct { position: absolute; inset: 0; z-index: 4; display: grid; align-content: center; justify-items: center; gap: 4px; color: #f6eefc;
  background: radial-gradient(80% 60% at 50% 40%, #6d3a99, #2a1747 70%); clip-path: circle(0% at 92% 6%); transition: clip-path .7s var(--ease); }
.pv-nav-sanctuary.open .sanct { clip-path: circle(150% at 92% 6%); }
.pv-nav-sanctuary .sanct div { display: grid; justify-items: center; }
.pv-nav-sanctuary .sanct a { font: 400 1.8rem/1.25 var(--s-head); opacity: 0; transform: translateY(12px); transition: .6s var(--ease); transition-delay: calc(var(--i) * 70ms + 200ms); }
.pv-nav-sanctuary.open .sanct a { opacity: 1; transform: none; }
.pv-nav-sanctuary .sanct a.cta { font: 500 .85rem var(--s-body); margin-top: 16px; padding: 11px 20px; border-radius: 999px; background: #e8c77b; color: #2a1747; }

/* hero */
.h-calm { text-align: center; padding: 22px 18px; } .h-calm .por { width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 14px; background: center 18%/cover; box-shadow: 0 0 0 4px var(--s-soft), 0 0 40px -6px var(--s-accent); }
.h-calm h4 { font-size: 1.7rem; line-height: 1.05; } .h-calm p { opacity: .8; font-size: .9rem; } .h-calm .r { display: flex; gap: 8px; justify-content: center; }
.h-photo { height: 330px; background: center 28%/cover; display: flex; align-items: flex-end; position: relative; color: #fff; }
.h-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(20,10,35,.8)); }
.h-photo > div { position: relative; padding: 18px; } .h-photo h4 { font-size: 1.8rem; line-height: 1.05; } .h-photo .k { opacity: .85; } .h-photo .b1 { margin-top: 6px; }
.h-next { padding: 18px; } .h-next .k { font-family: var(--script); text-transform: none; letter-spacing: 0; font-size: 1.5rem; opacity: 1; color: var(--s-accent); }
.h-next .nx { border-radius: 22px; padding: 18px; background: var(--s-soft); position: relative; overflow: hidden; }
.h-next .nx h4 { font-size: 1.45rem; line-height: 1.1; } .h-next .nx p { font-size: .86rem; opacity: .8; }
.h-next .live { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 500; color: var(--s-accent); margin-bottom: 8px; }
.h-next .live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: ping 1.8s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--s-accent) 60%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }

/* events */
.ev, .wkv, .emp { padding: 16px; } .ev .lbl { margin-top: 6px; }
.evc { border-radius: 16px; padding: 14px; margin-bottom: 10px; background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px rgba(127,127,127,.14); position: relative; color: #2a1f33; }
.evc h5 { margin: 6px 0 2px; } .evc p { margin: 0 0 8px; font-size: .84rem; opacity: .75; }
.evc .pill { font-size: .68rem; font-weight: 500; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; background: #e2f1e8; color: #2f6b4f; }
.evc.wk .pill { background: #efe5f8; color: #6d2f9a; } .evc.past { opacity: .75; } .evc.past .pill { background: #eee; color: #666; } .evc.past h5 { margin-bottom: 0; }
.ev .mem { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 46px; border: 0; background: none; color: inherit; padding: 0 2px; font-size: .95rem; }
.ev .mem small { opacity: .6; } .ev .mem i { margin-left: auto; font-style: normal; transition: transform .4s var(--spring); } .ev .mem[aria-expanded="true"] i { transform: rotate(180deg); }
.ev .memb { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); } .ev .memb.open { grid-template-rows: 1fr; } .ev .memb > div { overflow: hidden; }
.wkv .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 6px 0 14px; }
.wkv .days button { border: 0; background: var(--s-soft); color: inherit; border-radius: 14px; height: 62px; display: grid; justify-items: center; align-content: center; gap: 6px; transition: transform .3s var(--spring), background .3s; }
.wkv .days button i { width: 6px; height: 6px; border-radius: 50%; background: transparent; } .wkv .days button.has i { background: var(--s-accent); }
.wkv .days button.today { box-shadow: 0 0 0 2px var(--s-accent); } .wkv .days button.sel { background: var(--s-accent); color: var(--s-on); transform: translateY(-3px); } .wkv .days button.sel i { background: var(--s-on); }
.wkv .rest { text-align: center; padding: 14px; font-family: var(--s-head); font-size: 1.2rem; }
.emp { text-align: center; padding-top: 30px; } .emp .lotus { font-size: 2.2rem; color: var(--s-accent); animation: msb 6s ease-in-out infinite; } .emp p { font-size: .9rem; opacity: .8; }

/* booking */
.stp { padding: 22px 18px; } .stp .track { height: 3px; border-radius: 9px; background: var(--s-soft); margin: 14px 14px -16px; } .stp .track i { display: block; height: 100%; width: 0; background: var(--s-accent); border-radius: 9px; transition: width .6s var(--ease); }
.stp .nums { display: flex; justify-content: space-between; position: relative; } .stp .nums span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--s-bg); box-shadow: inset 0 0 0 1.5px var(--s-soft); font-size: .85rem; transition: .4s var(--spring); }
.stp .nums span.on { background: var(--s-accent); color: var(--s-on); box-shadow: none; transform: scale(1.08); }
.stp .pane { min-height: 120px; padding: 22px 4px 4px; } .stp .pane h5 { font-size: 1.4rem; } .stp .pane p { opacity: .8; }
.stp .r { display: flex; justify-content: space-between; } .stp .back { border: 0; background: none; color: inherit; min-height: 40px; opacity: .7; }
.pv-book-pill .wpill { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: #1f9e57; color: #fff; font-weight: 500; box-shadow: 0 10px 24px -8px rgba(31,158,87,.7); animation: nudge 4s 1s ease-in-out infinite; }
@keyframes nudge { 0%, 90%, 100% { transform: none; } 94% { transform: translateY(-4px); } 97% { transform: translateY(0); } }
.pv-book-pill .wsheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; background: #fff; color: #2a1f33; border-radius: 22px 22px 0 0; padding: 18px; transform: translateY(105%); transition: transform .5s var(--ease); }
.pv-book-pill.open .wsheet { transform: none; }
.pv-book-pill .wmsg { background: #dcf8c6; border-radius: 14px 14px 4px 14px; padding: 10px 12px; margin: 6px 0; font-size: .9rem; }
.pv-book-pill .wsheet .b1 { background: #1f9e57; color: #fff; width: 100%; margin-top: 10px; }

/* library */
.lib { padding: 14px; } .lib .fl { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; }
.lib .fl button { border: 0; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--s-soft); color: inherit; font-size: .84rem; transition: .3s; flex: none; }
.lib .fl button[aria-pressed="true"] { background: var(--s-accent); color: var(--s-on); }
.lib ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lib li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 16px; background: rgba(255,255,255,.7); color: #2a1f33; box-shadow: inset 0 0 0 1px rgba(127,127,127,.12); }
.lib li span { font-size: .9rem; line-height: 1.25; } .lib li small { display: block; opacity: .6; font-size: .74rem; }
.lib .pl { position: relative; width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: var(--s-soft); color: var(--s-accent); display: grid; place-items: center; }
.lib .pl b { font-size: .7rem; } .lib .pl svg { position: absolute; inset: 0; transform: rotate(-90deg); } .lib .pl circle { fill: none; stroke: var(--s-accent); stroke-width: 2.5; stroke-dasharray: 101; stroke-dashoffset: 101; }
.lib li.playing .pl circle { animation: prog 30s linear forwards; } .lib li.playing .pl b { font-size: 0; } .lib li.playing .pl b::before { content: "❚❚"; font-size: .6rem; }
@keyframes prog { to { stroke-dashoffset: 0; } }
.tod { padding: 22px 18px; text-align: center; } .tod .big { position: relative; width: 96px; height: 96px; border-radius: 50%; border: 0; margin: 10px auto 14px; display: grid; place-items: center; font-size: 1.4rem; background: var(--s-accent); color: var(--s-on); }
.tod .rg { position: absolute; inset: -10px; border-radius: 50%; border: 1.5px solid var(--s-accent); opacity: .4; } .tod.playing .rg, .stage.playing .tod .rg { animation: rip 2.4s ease-out infinite; }
@keyframes rip { from { transform: scale(.9); opacity: .6; } to { transform: scale(1.5); opacity: 0; } }
.tod .more { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 14px; } .tod .more span { font-size: .74rem; padding: 6px 10px; border-radius: 999px; background: var(--s-soft); }

/* words */
.sw { padding: 18px 0; } .sw .trk { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .sw .trk::-webkit-scrollbar { display: none; }
.sw figure { flex: 0 0 100%; scroll-snap-align: center; margin: 0; padding: 18px 26px; text-align: center; }
.sw blockquote { margin: 0 0 12px; font: italic 400 1.5rem/1.25 var(--s-head); } .sw figcaption { font-size: .8rem; opacity: .7; letter-spacing: .08em; }
.sw .dts { display: flex; justify-content: center; gap: 6px; } .sw .dts i { width: 7px; height: 7px; border-radius: 9px; background: currentColor; opacity: .2; cursor: pointer; transition: .4s var(--ease); } .sw .dts i.on { width: 20px; opacity: .8; background: var(--s-accent); }
.sw > .sm { display: block; text-align: center; color: var(--s-accent); opacity: 1; }
.wall { columns: 2; column-gap: 8px; padding: 12px; } .wall figure { break-inside: avoid; margin: 0 0 8px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.75); color: #2a1f33; box-shadow: inset 0 0 0 1px rgba(127,127,127,.12); animation: pop .5s calc(var(--i) * 60ms) var(--spring) both; }
.wall blockquote { margin: 0 0 6px; font: 400 1.02rem/1.25 var(--s-head); } .wall figcaption { font-size: .74rem; font-weight: 500; } .wall figcaption small { display: block; font-weight: 400; opacity: .6; }

/* sign-up */
.pv-join-inline .pg { padding-bottom: 6px; } .pv-join-inline .pg-img, .pv-join-sheet .pg-img { height: 60px; }
.inv { margin: 0 12px 14px; padding: 16px; border-radius: 18px; background: var(--s-soft); } .inv h5 { font-size: 1.2rem; } .inv p { font-size: .84rem; opacity: .8; margin: 0; }
.pv-join-sheet .show { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; z-index: 2; }
.pv-join-sheet .nsheet { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4; padding: 18px; border-radius: 20px; background: var(--s-bg); box-shadow: 0 20px 40px -10px rgba(0,0,0,.45), inset 0 0 0 1px rgba(127,127,127,.15); transform: translateY(120%); transition: transform .6s var(--spring); }
.pv-join-sheet.open .nsheet { transform: none; } .pv-join-sheet .nsheet p { font-size: .85rem; opacity: .8; margin: 0; }

/* magic */
.br { padding: 22px; text-align: center; } .br .orb { width: 140px; height: 140px; margin: 10px auto; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; font-family: var(--s-head); font-size: 1.15rem;
  background: radial-gradient(circle at 38% 32%, #fff6, transparent 40%), radial-gradient(circle, #c9a3e6, #7b3fa8 70%); box-shadow: 0 0 50px -6px #9a5fc6; transform: scale(.82); transition: transform 5.5s cubic-bezier(.45,0,.55,1), box-shadow 5.5s; }
.br .orb.in { transform: scale(1.08); box-shadow: 0 0 80px 4px #c9a3e6; } .br .orb.out { transform: scale(.78); }
.mn { display: flex; gap: 16px; align-items: center; padding: 22px 18px; background: linear-gradient(160deg, #2a1747, #1a0f2e); color: #f3ebfb; min-height: 160px; } .mn svg { flex: none; filter: drop-shadow(0 0 18px rgba(232,199,123,.35)); }
.mn h5 { font-size: 1.35rem; } .mn p { margin: 0; font-size: .88rem; opacity: .85; }
.af { padding: 26px 20px; text-align: center; } .af blockquote { margin: 6px 0 16px; font: italic 400 1.6rem/1.2 var(--s-head); transition: opacity .3s, transform .3s; } .af blockquote.fade { opacity: 0; transform: translateY(6px); }
.af .r { display: flex; gap: 8px; justify-content: center; } .af .r button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid currentColor; background: none; color: inherit; opacity: .8; }
.snd { padding: 22px; text-align: center; } .snd .bowl { position: relative; width: 150px; height: 150px; border-radius: 50%; border: 0; background: radial-gradient(circle at 50% 40%, #f6e3b3, #c99a45 60%, #8a6526); color: #2a1a05; display: grid; place-items: center; box-shadow: 0 16px 30px -12px rgba(138,101,38,.7); }
.snd .bowl b { position: relative; font-weight: 500; } .snd .bowl i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid #c99a45; opacity: 0; }
.snd .bowl.ring i { animation: rip 2.6s ease-out forwards; } .snd .bowl.ring i:nth-child(2) { animation-delay: .4s; } .snd .bowl.ring i:nth-child(3) { animation-delay: .8s; }
.dl { padding: 0 0 14px; } .dl .sky { height: 150px; position: relative; overflow: hidden; transition: background 1s; }
.dl .sun { position: absolute; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; background: radial-gradient(circle, #fff6d8, #f2c26b); box-shadow: 0 0 40px #f2c26b; transition: left .8s var(--ease), bottom .8s var(--ease), background .8s; }
.dl .sun.moon { background: radial-gradient(circle at 40% 40%, #fff, #d9cff0); box-shadow: 0 0 30px #b9a6ea; }
.dl label { display: block; padding: 14px 16px 0; font-size: .8rem; } .dl label span { display: block; opacity: .7; margin-bottom: 4px; }
.dl input[type=range] { width: 100%; height: 44px; padding: 0; border: 0; background: none; accent-color: var(--s-accent); }
.dl .when { padding: 0 16px; }

/* ---------- studio mini-site (.st-*) ---------- */
.st-site { position: relative; min-height: 100%; color: #33213f; font-family: 'Jost', sans-serif; font-size: 12px; overflow: hidden; --st-pad: 14px; transition: color .8s; }
.st-bg, .st-stars { position: absolute; inset: 0; transition: opacity 1s; }
.st-bg.base { background: linear-gradient(175deg, #f6e4ee, #f7f3df 40%, #dbe9f3); }
.st-bg.dawn { background: linear-gradient(180deg, #fbd3b4, #f9e6c8 45%, #f6c4cf); opacity: 0; }
.st-bg.night { background: radial-gradient(120% 70% at 50% 0%, #3d2364, #1a0f2e 70%); opacity: 0; }
.st-stars { opacity: 0; background-image: radial-gradient(1px 1px at 15% 20%, #fff, transparent), radial-gradient(1.4px 1.4px at 80% 12%, #f6e3b3, transparent), radial-gradient(1px 1px at 60% 40%, #fff, transparent), radial-gradient(1px 1px at 30% 70%, #d9c2f5, transparent), radial-gradient(1.4px 1.4px at 85% 80%, #fff, transparent), radial-gradient(1px 1px at 45% 92%, #f6e3b3, transparent); }
.st-site[data-pal="dawn"] .st-bg.dawn, .st-site[data-pal="night"] .st-bg.night { opacity: 1; }
.st-site[data-pal="night"] .st-stars { opacity: 1; animation: mstw 3s ease-in-out infinite alternate; }
.st-site[data-pal="night"] { color: #f1e8fb; }
.st-in { position: relative; padding-bottom: 70px; }
.st-top { padding: 36px var(--st-pad) 8px; transition: opacity .5s, transform .5s var(--ease); }
.st-top b { font: 1.6rem/1 'Great Vibes', cursive; color: #6d2f9a; display: block; text-align: center; transition: color .8s; }
.st-site[data-pal="night"] .st-top b { color: #e8c77b; } .st-site[data-pal="dawn"] .st-top b { color: #b2456b; }
.st-top nav { display: flex; justify-content: center; gap: 10px; margin-top: 6px; font-size: .72rem; opacity: .85; white-space: nowrap; }
.st-site .mon { display: inline-block; max-width: 0; overflow: hidden; opacity: 0; transition: max-width .7s var(--ease), opacity .7s; color: #7b3fa8; font-weight: 500; vertical-align: bottom; }
.st-site.monday .mon { max-width: 80px; opacity: 1; animation: glowtxt 2s 1; } .st-site[data-pal="night"] .mon { color: #e8c77b; }
@keyframes glowtxt { 30% { text-shadow: 0 0 12px currentColor; } }
.st-site.bottom .st-top nav { opacity: 0; height: 0; margin: 0; }
.st-ev { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease); margin: 0 var(--st-pad); }
.st-ev > div { overflow: hidden; } .st-ev p { margin: 8px 0 4px; padding: 10px 12px; border-radius: 12px; background: rgba(123,63,168,.12); font-size: .74rem; line-height: 1.35; }
.st-site[data-pal="night"] .st-ev p { background: rgba(232,199,123,.15); }
.st-site.event .st-ev { grid-template-rows: 1fr; }
.st-hero { padding: 12px var(--st-pad); text-align: center; transition: padding .8s var(--ease); }
.st-img { position: relative; width: 120px; height: 120px; margin: 4px auto 12px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px rgba(255,255,255,.6), 0 0 30px rgba(155,95,198,.4); transition: width .8s var(--ease), height .8s var(--ease); }
.st-img i { position: absolute; inset: 0; background: center 20%/cover; transition: opacity .9s; } .st-img .portrait { background-image: url(../img/kerry-portrait.jpg); } .st-img .pool { background-image: url(../img/kerry-pool.jpg); background-position: 50% 45%; opacity: 0; }
.st-site[data-photo="pool"] .st-img .pool { opacity: 1; }
.st-tag { display: inline-block; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: rgba(123,63,168,.12); margin-bottom: 6px; transition: opacity .5s, max-height .6s; max-height: 30px; }
.st-hero h5 { font: 500 1.4rem/1.08 'Cormorant Garamond', serif; margin: 0 0 6px; transition: font-weight .6s; }
.st-hero p { opacity: .8; margin: 0 0 10px; }
.st-btn { display: inline-block; padding: 9px 16px; border-radius: 999px; background: #7b3fa8; color: #fff; font-weight: 500; transition: background .8s, color .8s, box-shadow .8s; }
.st-site[data-pal="dawn"] .st-btn { background: #b2456b; } .st-site[data-pal="night"] .st-btn { background: #9b6bff; }
.st-site.gold .st-btn { background: linear-gradient(135deg, #f6e3b3, #e8c77b 50%, #c99a45); color: #2a1a05; box-shadow: 0 6px 20px -6px rgba(232,199,123,.9); }
.st-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px var(--st-pad); transition: gap .8s, padding .8s; }
.st-cards div { padding: 12px; border-radius: 14px; background: rgba(255,255,255,.6); transition: background .8s; } .st-site[data-pal="night"] .st-cards div { background: rgba(255,255,255,.08); }
.st-cards b { display: block; font-weight: 500; } .st-cards small { opacity: .7; }
.st-site.calm { --st-pad: 26px; } .st-site.calm .st-hero { padding-top: 26px; padding-bottom: 26px; } .st-site.calm .st-tag { opacity: 0; max-height: 0; margin: 0; padding: 0; }
.st-site.calm .st-hero h5 { font-weight: 400; } .st-site.calm .st-img { width: 96px; height: 96px; } .st-site.calm .st-cards { gap: 16px; }
.st-tabs { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; justify-content: space-around; padding: 10px 4px; border-radius: 16px; background: rgba(255,255,255,.92); color: #33213f; font-size: .64rem; box-shadow: 0 8px 20px -8px rgba(0,0,0,.4); transform: translateY(130%); transition: transform .7s var(--spring); }
.st-site.bottom .st-tabs { transform: none; } .st-tabs .mon { color: #7b3fa8; }
.stage a { color: inherit; text-decoration: none; }
.pv-nav-drawer, .pv-nav-tabs, .pv-nav-sanctuary { height: 380px; }
.pv-nav-drawer .drawer { padding-top: 50px; } .pv-nav-drawer .drawer a { padding: 8px 4px; font-size: 1rem; }
[hidden] { display: none !important; }
.lib li, .evc, .wall figure { background: var(--s-soft); color: inherit; }
.evc .pill { background: var(--s-bg); color: var(--s-accent); box-shadow: inset 0 0 0 1px var(--s-accent); }
.evc.past .pill { box-shadow: none; opacity: .7; }