/* The Scapes bloom. Dark by default, light via .theme-light. */
.bloom { --bloom-haze:#ebe3d2; --bloom-ink:#ebe3d2; --bloom-sub:#c9bfae; position:relative; max-width:980px; margin:clamp(28px,4vw,48px) auto 0; }
.theme-light .bloom { --bloom-haze:#2e2c27; --bloom-ink:#2e2c27; --bloom-sub:#5a554c; }
.bloom__svg { display:none; width:100%; height:auto; overflow:visible; }
.bloom__haze { font-family:var(--font-body); font-size:13px; letter-spacing:.32em; text-transform:uppercase; fill:var(--bloom-sub); }
.bloom__hazeline { font-family:var(--font-body); font-size:12px; fill:var(--bloom-sub); opacity:.8; }
.bloom__pname { font-family:var(--font-display); font-size:25px; fill:var(--bloom-ink); }
.bloom__pline { font-family:var(--font-body); font-size:13px; fill:var(--bloom-sub); }
.bloom__cname { font-family:var(--font-display); font-size:27px; fill:#ebe3d2; }
.bloom__cline { font-family:var(--font-body); font-size:12px; fill:#c9d3c0; }
.bloom__band { font-family:var(--font-display); font-size:20px; letter-spacing:.04em; fill:#23301f; }
.bloom__bandline { font-family:var(--font-body); font-size:11px; letter-spacing:.06em; fill:#2f3d29; }
.bloom__piece circle { transition:opacity 700ms cubic-bezier(.22,.61,.36,1); }
.bloom__piece:hover circle, .bloom__piece:focus-visible circle { opacity:1.0; filter:url(#bl-soft) brightness(1.15); }
.bloom__piece:focus-visible, .bloom__heart a:focus-visible { outline:none; }
.bloom--drawn .bloom__pieces .bloom__piece, .bloom--drawn .bloom__heart { opacity:0; transform-origin:500px 500px; transform:scale(.86); transition:opacity 1100ms cubic-bezier(.22,.61,.36,1), transform 1100ms cubic-bezier(.22,.61,.36,1); transition-delay:calc(var(--i,0) * 60ms); }
.bloom--in .bloom__pieces .bloom__piece, .bloom--in .bloom__heart { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .bloom--drawn .bloom__piece, .bloom--drawn .bloom__heart { transition:none; opacity:1; transform:none; } }
/* The list: the source of the drawing, and the phone layout. */
.bloom__list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.bloom__list li { display:block; }
.bloom__list a, .bloom__list .bloom__row { display:grid; grid-template-columns:14px 1fr; column-gap:14px; align-items:baseline; padding:14px 16px; border:1px solid rgba(202,182,134,.18); border-radius:6px; text-decoration:none; background:rgba(235,227,210,.025); }
.bloom__dot { width:12px; height:12px; border-radius:50%; background:var(--c); align-self:center; box-shadow:0 0 14px var(--c); }
.bloom__name { font-family:var(--font-display); font-size:22px; color:var(--bloom-ink); }
.bloom__line { grid-column:2; font-family:var(--font-body); font-size:14px; color:var(--bloom-sub); margin-top:2px; }
.bloom__list li[data-role="core"] a { background:#23301f; border-color:#23301f; }
.bloom__list li[data-role="core"] .bloom__name, .bloom__list li[data-role="core"] .bloom__line { color:#ebe3d2; }
.bloom__list li[data-role="band"] a { background:#c6dcb4; border-color:#c6dcb4; }
.bloom__list li[data-role="band"] .bloom__name, .bloom__list li[data-role="band"] .bloom__line { color:#23301f; }
.bloom__list li[data-role="haze"] .bloom__row { border-style:dashed; }
@media (min-width:760px) { .bloom--drawn .bloom__svg { display:block; } .bloom--drawn .bloom__list { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } }