/* day-page.css — /day/ "A day with Brain Club": the page's own first screen (the kit's gold page hero, the clay lamp with its three stars
   rising), the chapter pills, and the last door. The chapters keep their own sheets and files (old.css, day.css, day-phone.css,
   day-sheet.css, bubbles.css, hall.css, floor.css, mix.css). Prefix dp-. Kit tokens only. */
.dp-hero .k-eyebrow{color:var(--plum-500)}
.dp-hero .k-lead{max-width:30em}

/* the chapters, as pills: a plum clay number and the chapter's own eyebrow */
.dp-toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.dp-toc a{display:inline-flex;align-items:center;gap:9px;padding-block:7px; padding-inline:7px 15px;border-radius:999px;background:rgba(255,248,226,.62);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 10px 18px -12px rgba(110,50,0,.5);font:650 .9rem/1.15 var(--display);color:var(--plum-600);text-decoration:none;transition:transform .4s var(--spring),background .25s}
.dp-toc a:hover{background:var(--cream-50);transform:translateY(-2px)}
.dp-toc b{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;background:var(--k-grain-light),var(--k-plum-clay);box-shadow:var(--k-plum-shadow);font:750 .78rem/1 var(--display);color:var(--cream-50)}
.dp-toc a:focus-visible{outline:3px solid var(--plum-400);outline-offset:3px}

/* the lamp: the turning point of the story; its stars rise from the spout and stay inside the art box */
.dp-art{overflow:clip;padding:16% 4% 4%}
.dp-lamp{width:80%;margin-inline-end:auto}
.dp-lamp::before{content:"";position:absolute;z-index:-1;inset-inline-start:10%;inset-inline-end:22%;bottom:-6%;height:14%;border-radius:50%;background:radial-gradient(closest-side,rgba(110,50,0,.34),rgba(110,50,0,0));filter:blur(4px)}

/* the last door: one sentence and the one button */
.dp-end-in{display:grid;justify-items:center;text-align:center}
.dp-end .k-h2{max-width:14em;color:var(--plum-600)}
.dp-end .k-lead{margin-top:16px;max-width:32em}
.dp-end-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
.dp-end-st{width:44px;height:auto;margin-bottom:16px;filter:drop-shadow(0 10px 8px rgba(130,70,0,.4))}

/* without JavaScript the chapters stay still; one line says so */
.dp-noscript{padding:40px 0;color:var(--ink-2)}

@media (max-width:900px){.dp-art{max-width:360px;padding-top:10%}}
@media (max-width:560px){.dp-toc a{font-size:.85rem;padding-inline-end:12px}}