/* HOME EXPERIMENT — "Index": a pinned accordion scene driven by scroll */
.ixs{position:relative;height:520svh}
.ixs-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;gap:clamp(1rem,4vw,4rem);padding:5.5rem var(--pad) 3.5rem calc(var(--pad) + 2.2rem)}
.ixs-thread{position:absolute;left:calc(var(--pad) - .2rem);top:20%;bottom:16%;width:1px;background:linear-gradient(var(--line),var(--line))}
.ixs-bead{position:absolute;left:-6px;top:0;width:13px;height:13px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 22%,transparent),0 0 24px var(--accent);will-change:transform}
.ixs-list{grid-column:1;grid-row:1;list-style:none;display:flex;flex-direction:column;height:min(74svh,700px);position:relative;z-index:2}
.ixs-list li{flex:1 1 0;min-height:0;border-top:1px solid var(--line);transition:flex-grow .9s var(--ease-out);display:flex}
.ixs-list li:last-child{border-bottom:1px solid var(--line)}
.ixs-list li.on{flex-grow:4.2}
.ixs-row{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.2rem;padding:.2rem 0;color:var(--c);min-width:0}
.ixs-w{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.ixs-w .bo{font-size:clamp(2rem,4.2vw,3.6rem);line-height:1.35;color:var(--cream-dim);transition:font-size .9s var(--ease-out),color .6s,transform .9s var(--ease-out);transform-origin:left center;white-space:nowrap}
.ixs-w .en{font-size:clamp(1.1rem,1.8vw,1.5rem);color:var(--cream-faint);transition:color .6s}
li.on .ixs-w .bo{font-size:clamp(3rem,min(7vw,15vh),8.4rem);color:var(--c)}
li.on .ixs-w .en{color:var(--cream)}
.ixs-more{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem 2rem;max-height:0;opacity:0;overflow:hidden;transition:max-height .9s var(--ease-out),opacity .7s .15s}
li.on .ixs-more{max-height:180px;opacity:1}
.ixs-more .sub{display:flex;flex-direction:column;gap:.1rem;color:var(--cream-dim)}
.ixs-more .sub .bo{font-size:clamp(1.1rem,1.8vw,1.5rem);line-height:1.6}
.ixs-more .sub .en{font-size:1.1rem}
.ixs-more .btn{background:rgba(13,9,6,.45);border-color:var(--c);padding:.7rem 1.5rem}
.ixs-more .btn::before{background:var(--c)}
.ixs-more .btn .bo{font-size:1.2rem;color:inherit}.ixs-more .btn .en{font-size:.95rem}
.ixs-row.soon .ixs-more .btn{display:none}
.ixs-row:hover .ixs-w .bo{color:var(--c)}
/* symbols */
.ixs-sym{grid-column:2;grid-row:1;position:relative;aspect-ratio:1;width:min(100%,520px);justify-self:center;pointer-events:none}
.sym{position:absolute;inset:0;width:100%;height:100%;overflow:visible;color:var(--accent)}
.sym *{fill:none;stroke:currentColor;stroke-width:1.15;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.sym .fillit{fill:currentColor;stroke:none}
.sym .spin{transform-origin:100px 100px}
.ixs-hint{position:absolute;left:0;right:0;bottom:1rem;text-align:center;color:var(--cream-dim);pointer-events:none}
.ixs-hint .bi{align-items:center}
@media (max-width:860px){
  .ixs-pin{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:center;gap:.4rem;padding:4.6rem var(--pad) 3rem calc(var(--pad) + 1.2rem)}
  .ixs-sym{grid-column:1;grid-row:1;width:min(52vw,230px)}
  .ixs-list{grid-row:2}
  .ixs-list{height:min(52svh,460px)}
  li.on .ixs-w .bo{font-size:clamp(2.8rem,15vw,5.4rem)}
  .ixs-w .bo{font-size:clamp(1.7rem,8vw,2.6rem)}
  .ixs-w{flex-wrap:wrap;gap:0 .8rem}
  .ixs-thread{left:calc(var(--pad) - .5rem)}
}
@media (prefers-reduced-motion:reduce){.ixs{height:auto}.ixs-pin{position:relative;height:auto;padding:4rem var(--pad)}.ixs-list li{flex:none}.ixs-more{max-height:none;opacity:1}.ixs-w .bo{font-size:clamp(2.6rem,7vw,5rem);color:var(--c)}.ixs-sym,.ixs-thread,.ixs-hint{display:none}}