/* Home · redesign 2026 */
.hero{isolation:isolate}
.hero::before{content:"";position:absolute;z-index:-1;right:2%;top:4%;width:min(58vw,820px);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in oklab,var(--blush) 70%,transparent),color-mix(in oklab,var(--lilac) 26%,transparent) 55%,transparent 72%);filter:blur(10px);pointer-events:none}
.hero h1{font-size:clamp(60px,6.2vw,104px);letter-spacing:-.045em;line-height:.98}
.hero h1 .w{display:inline-block}
.hero-description{font-size:16px;line-height:1.75;color:var(--ink-soft);margin:28px 0 34px}
.hero-art picture{border-radius:999px 999px var(--radius-l) var(--radius-l);box-shadow:var(--shadow-2)}
.hero-art figcaption{font-size:10px}
.art-seal{background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--shadow-1);border-color:rgb(222 214 201/.8)}
.hero-footnote p{font-size:11px}
.scroll-cue{font-size:11px;font-weight:500}
.scroll-cue span{display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;font-size:14px}

/* Stone ribbon */
.stone-ribbon{overflow:hidden;border-block:1px solid var(--line);background:var(--cream);padding:22px 0;white-space:nowrap}
.stone-ribbon ul{display:inline-flex;gap:0;margin:0;padding:0;list-style:none;will-change:transform}
.stone-ribbon li{display:inline-flex;align-items:center;font:400 clamp(26px,2.6vw,40px)/1 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.stone-ribbon li::after{content:"";display:inline-block;width:12px;height:12px;margin:0 clamp(22px,2.4vw,40px);border-radius:50%;background:var(--dot,var(--gold));box-shadow:0 0 0 5px color-mix(in oklab,var(--dot,var(--gold)) 22%,transparent)}
.stone-ribbon li:nth-child(4n+1){--dot:#c99aa0}.stone-ribbon li:nth-child(4n+2){--dot:#8fb39a}.stone-ribbon li:nth-child(4n+3){--dot:#9c86b0}.stone-ribbon li:nth-child(4n){--dot:#d9955d}

/* Intention */
.intention{border-top:0}
.intention h2,.energy-heading h2,.personal h2{letter-spacing:-.035em}
.intention-bottom p,.energy-heading>p:last-child,.personal>div>p{font-size:15px;color:var(--ink-soft)}

/* Feeling explorer: the section takes on the chosen feeling's tint */
.energy{--tint:var(--lilac);background:color-mix(in oklab,var(--tint) 24%,var(--paper));transition:background-color var(--dur-3) var(--ease-out);position:relative;overflow:hidden;isolation:isolate}
.energy:has([data-feeling=connection][aria-pressed=true]){--tint:var(--blush)}
.energy:has([data-feeling=expression][aria-pressed=true]){--tint:var(--apricot)}
.energy::before{content:"";position:absolute;z-index:-1;width:60vw;max-width:900px;aspect-ratio:1;right:-12%;top:-30%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in oklab,var(--tint) 60%,transparent),transparent);transition:background var(--dur-3) ease;pointer-events:none}
.energy-heading h2{font-size:clamp(52px,5vw,78px)}
.feeling-buttons{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:420px;padding:5px;border:1px solid color-mix(in oklab,var(--ink) 18%,transparent);border-radius:var(--radius-pill);background:rgb(255 253 248/.55)}
.feeling-buttons::before{content:"";position:absolute;top:5px;bottom:5px;left:5px;width:calc((100% - 10px)/3);border-radius:var(--radius-pill);background:var(--ink);transition:transform var(--dur-2) var(--ease-out)}
.feeling-buttons:has([data-feeling=connection][aria-pressed=true])::before{transform:translateX(100%)}
.feeling-buttons:has([data-feeling=expression][aria-pressed=true])::before{transform:translateX(200%)}
.feeling-buttons button{position:relative;border:0!important;margin:0;font-size:13px;font-weight:500;color:var(--ink-soft);border-radius:var(--radius-pill);transition:color var(--dur-2) ease}
.feeling-buttons button[aria-pressed=true]{color:var(--cream)}
.feeling-copy{margin-top:28px}.feeling-copy h3{font-size:30px}.feeling-copy p{font-size:14px!important;color:var(--ink-soft)}
.feeling-stones .stone-art{position:relative;overflow:visible}
.feeling-stones .stone-art::before{content:"";position:absolute;inset:12%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in oklab,var(--s1,var(--tint)) 55%,transparent),transparent);opacity:.55;transform:scale(.9);transition:opacity var(--dur-2) ease,transform var(--dur-3) var(--ease-out)}
.feeling-stones .stone-open:hover .stone-art::before{opacity:1;transform:scale(1.15)}
.feeling-stones .stone-art img{position:relative}
.feeling-stones .favorite{background:rgb(255 253 248/.8)!important}

/* Founder */
.founder{border-bottom:0}
.founder-image{max-width:260px;position:relative}
.founder-image::before{content:"";position:absolute;inset:-14px;border-radius:999px 999px var(--radius-m) var(--radius-m);border:1px solid color-mix(in oklab,var(--gold) 45%,transparent);background:color-mix(in oklab,var(--blush) 35%,transparent);z-index:-1}
.founder-aside{isolation:isolate}
.founder-image img{height:320px;border-radius:999px 999px var(--radius-m) var(--radius-m)}
blockquote{letter-spacing:-.02em}
.signature span{font-size:10px;letter-spacing:1.6px;color:var(--muted)}

/* Your piece: a luminous panel */
.personal{display:block;padding-block:30px 100px}
.personal>div{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--radius-l);padding:clamp(40px,6vw,90px);background:linear-gradient(120deg,color-mix(in oklab,var(--blush) 55%,var(--cream)),color-mix(in oklab,var(--sage) 55%,var(--cream)) 60%,color-mix(in oklab,var(--lilac) 40%,var(--cream)))}
.personal>div::after{content:"";position:absolute;z-index:-1;right:-8%;bottom:-40%;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgb(255 253 248/.8),transparent)}
.personal h2{font-size:clamp(44px,4.6vw,72px);max-width:760px}
.personal>div>p{max-width:520px}

/* Closing: one deep, quiet band */
.closing{position:relative;overflow:hidden;isolation:isolate;background:var(--ink);color:var(--cream);padding:clamp(80px,10vw,140px) 24px}
.closing::before{content:"";position:absolute;z-index:-1;inset:-40% -10% auto auto;width:70vw;max-width:900px;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgb(237 177 123/.22),transparent)}
.closing::after{content:"";position:absolute;z-index:-1;left:-15%;bottom:-60%;width:60vw;max-width:800px;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgb(203 184 208/.2),transparent)}
.closing>img{filter:brightness(0) invert(.86) sepia(.3)}
.closing h2{font-size:clamp(52px,6.4vw,100px);letter-spacing:-.04em}
.closing em{color:var(--bronze-light)}
.closing>p{color:rgb(248 245 237/.78);font-size:15px}
.closing .button{margin-top:34px;color:var(--cream);border-color:rgb(248 245 237/.5)}
.closing .button span{background:var(--cream);color:var(--ink)}
.closing .button:hover{background:var(--cream);color:var(--ink)}.closing .button:hover span{background:var(--ink);color:var(--cream)}

/* Motion (never for reduced-motion visitors) */
@media(prefers-reduced-motion:no-preference){
  .hero h1 .w{animation:word-in 1s var(--ease-out) both;animation-delay:calc(var(--w)*70ms + 80ms)}
  .hero-description,.hero .button{animation:word-in 1s var(--ease-out) both;animation-delay:520ms}
  @supports (animation-timeline:view()){
    .hero-art picture img{animation:hero-drift linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    .art-seal{animation:seal-turn linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    .stone-ribbon ul{animation:ribbon linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes word-in{from{opacity:0;transform:translateY(.4em)}}
@keyframes hero-drift{to{transform:scale(1.08) translateY(4%)}}
@keyframes seal-turn{from{transform:rotate(10deg)}to{transform:rotate(-50deg)}}
@keyframes ribbon{from{transform:translateX(0)}to{transform:translateX(-38%)}}

@media(max-width:1000px){.hero::before{width:80vw;right:-20%}.personal{padding-bottom:78px}}
@media(max-width:700px){
  .hero h1{font-size:clamp(52px,14vw,76px)}
  .hero::before{width:120vw;right:-40%;top:40%}
  .stone-ribbon{padding:16px 0}
  .feeling-buttons{max-width:100%}
  .feeling-buttons button{font-size:12px;padding-inline:4px}
  .founder-image{width:110px}.founder-image img{height:136px}.founder-image::before{inset:-8px}
  .personal{padding:10px 4% 60px}.personal>div{border-radius:22px;padding:42px 7%}
  .closing .button{gap:18px}
}
#main{overflow-x:clip}