/* day.css — "Nothing too small. Nothing too big." (#day) on a cream sheet: the six speeds as clay chips (each with its clay object; the
   star of the speed in view lights), one example day of a small bakery down a timeline whose nodes are clay stars (the step in view is
   lifted onto paper and its star lights), the plum clay phone beside it (day-phone.css) with its little pages (day-sheet.css).
   Prefix dy-. Kit tokens only. */
.dy .k-eyebrow{color:var(--plum-500)}
.dy .k-h2{color:var(--plum-600)}
.dy-i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dy-star-on{opacity:0}

/* ── the six speeds ── */
.dy-speeds{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.dy-sp{position:relative;display:grid;align-content:start;justify-items:start;gap:12px;padding:16px 16px 18px;text-align:start;border-radius:26px;color:var(--ink);background:var(--k-paper);box-shadow:var(--k-paper-shadow);transition:transform .45s var(--spring),box-shadow .35s}
.dy-sp:hover{transform:translateY(-4px)}
.dy-spic{display:flex;align-items:flex-end;height:54px}
.dy-spic img{width:auto;height:100%;filter:drop-shadow(0 8px 8px rgba(110,50,0,.3));transition:transform .55s var(--spring)}
.dy-sptx b{display:block;font:770 1.08rem/1.15 var(--display);letter-spacing:-.015em;color:var(--plum-600)}
.dy-sptx span{display:block;margin-top:5px;font-size:.84rem;line-height:1.4;color:var(--ink-3)}
.dy-spst{position:absolute;top:14px;inset-inline-end:14px;display:grid;width:24px}
.dy-spst img{grid-area:1/1;width:100%;height:auto;filter:drop-shadow(0 3px 3px rgba(110,50,0,.3));transition:opacity .45s,transform .55s var(--spring)}
.dy-sp[aria-current]{transform:translateY(-6px);box-shadow:var(--k-paper-shadow),0 0 0 3px var(--gold-400),0 28px 42px -22px rgba(200,130,0,.6)}
.dy-sp[aria-current] .dy-spic img{transform:rotate(-7deg) scale(1.1)}
.dy-sp[aria-current] .dy-star-off{opacity:0}
.dy-sp[aria-current] .dy-star-on{opacity:1;filter:drop-shadow(0 0 8px rgba(250,201,63,.95)) drop-shadow(0 3px 3px rgba(130,70,0,.35))}
.dy-sp[aria-current] .dy-spst img{transform:scale(1.3) rotate(14deg)}
.dy-sp:focus-visible{outline:3px solid var(--plum-400);outline-offset:3px;border-radius:26px}

/* ── the day: a timeline with clay star nodes, the phone beside it ── */
.dy-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,384px);gap:clamp(28px,6vw,96px);align-items:start;margin-top:clamp(40px,5vw,64px)}
.dy-steps{position:relative;display:grid;grid-template-columns:minmax(0,1fr)}
.dy-steps::before{content:"";position:absolute;inset-inline-start:21px;top:calc(5vh + 20px);bottom:calc(5vh + 20px);width:3px;margin-inline-start:-1.5px;border-radius:3px;background:linear-gradient(180deg,rgba(100,8,46,.16),rgba(100,8,46,.16) 92%,rgba(100,8,46,0))}
.dy-step{position:relative;min-height:58svh;padding-block:5vh; padding-inline:64px 0}
.dy-node{position:absolute;inset-inline-start:0;top:calc(5vh + 22px);z-index:1;display:grid;width:42px;transition:transform .55s var(--spring)}
.dy-node img{grid-area:1/1;width:100%;height:auto;filter:drop-shadow(0 6px 6px rgba(110,50,0,.28));transition:opacity .5s,filter .5s}
.dy-step.dy-on .dy-node{transform:scale(1.18) rotate(-8deg)}
.dy-step.dy-on .dy-node .dy-star-off{opacity:0}
.dy-step.dy-on .dy-node .dy-star-on{opacity:1;filter:drop-shadow(0 0 12px rgba(250,201,63,.95)) drop-shadow(0 6px 6px rgba(130,70,0,.35))}
.dy-box{padding:24px 28px 28px;border-radius:30px;transition:background .5s,box-shadow .5s}
.dy-step.dy-on .dy-box{background:var(--k-paper);box-shadow:var(--k-paper-shadow),0 34px 54px -32px rgba(110,50,0,.5)}
.dy-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.dy-meta time,.dy-when{font:770 .98rem/1 var(--display);letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--plum-500)}
.dy-chip{display:inline-flex;align-items:center;gap:6px;padding-block:5px; padding-inline:8px 11px;border-radius:999px;font:650 .74rem/1.2 var(--text);letter-spacing:.02em;color:var(--plum-600);background:var(--cream-200);box-shadow:inset 0 1px 0 #fff}
.dy-chip .dy-i{width:15px;height:15px}
.dy-chip[data-s="big"]{color:var(--plum-700);background:var(--k-gold-clay);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.dy-chip[data-s="link"]{color:var(--cream-50);background:var(--k-plum-clay);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.dy-box h3{margin-top:12px;font-size:clamp(1.55rem,2.6vw,2.3rem);font-weight:800;letter-spacing:-.032em;color:var(--ink-3);transition:color .45s}
.dy-step.dy-on .dy-box h3{color:var(--plum-600)}
.dy-box>p{max-width:34em;margin-top:12px;color:var(--ink-2)}
/* the rhythm drawings */
.dy-viz{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 30px;margin-top:20px}
.dy-beat{display:inline-flex;align-items:flex-end;gap:clamp(6px,1.1vw,11px)}
.dy-beat i{display:grid;justify-items:center;gap:7px;font-style:normal}
.dy-beat u{display:block;width:14px;height:14px;border-radius:50%;text-decoration:none;background:rgba(100,8,46,.1);box-shadow:inset 0 1px 2px rgba(100,8,46,.16);transition:transform .45s var(--spring)}
.dy-beat--hours u{width:11px;height:11px}
.dy-beat .dy-past u{background:var(--gold-200);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.dy-beat .dy-on u{background:var(--k-gold-clay);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 4px rgba(250,201,63,.28),0 4px 8px -2px rgba(170,100,0,.5);transform:scale(1.28)}
.dy-beat b{min-height:.7rem;font:600 .6875rem/1 var(--text);font-variant-numeric:tabular-nums;color:var(--ink-3)}
.dy-beat .dy-on b{font-weight:800;color:var(--plum-600)}
.dy-secs{display:inline-flex;align-items:center;gap:10px}
.dy-secs i{position:relative;display:block;width:140px;height:8px;overflow:hidden;border-radius:4px;background:rgba(100,8,46,.1)}
.dy-secs i::after{content:"";position:absolute;inset:0 auto 0 0;width:34%;border-radius:4px;background:var(--k-gold-clay);animation:dy-sec 1.7s ease-in-out infinite}
.dy-secs b{font:770 .82rem/1 var(--display);color:var(--plum-600)}
@keyframes dy-sec{0%{transform:translateX(-110%)}60%,100%{transform:translateX(320%)}}
.dy-seg{display:inline-flex;gap:4px}
.dy-seg i{display:block;width:12px;height:7px;border-radius:4px;background:rgba(100,8,46,.12)}
.dy-seg i.dy-on{background:var(--k-gold-clay);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.dy-seg--big i{width:30px;height:10px;border-radius:5px}
.dy-urlpill{display:inline-flex;align-items:center;gap:8px;padding-block:7px; padding-inline:11px 14px;border-radius:999px;font:600 .82rem/1 var(--text);color:var(--plum-600);background:#fff;box-shadow:inset 0 0 0 1px rgba(100,8,46,.08),0 8px 16px -10px rgba(90,40,0,.5)}
.dy-urlpill .dy-i{width:14px;height:14px;color:#2f7a4d}
/* who is behind the step, and the procedures it runs */
.dy-who{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:22px}
.dy-lab{font:650 .7rem/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--plum-500)}
.dy-face{display:inline-flex;align-items:center;gap:8px;padding-block:3px; padding-inline:3px 13px;border-radius:999px;text-decoration:none;font:600 .84rem/1.2 var(--text);color:var(--ink-2);background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(100,8,46,.07);transition:background .2s,color .2s}
.dy-face img{width:32px;height:32px;border-radius:50%;object-fit:cover;background:var(--cream-200);box-shadow:0 4px 8px -4px rgba(90,40,0,.5)}
.dy-face:hover{color:var(--plum-600);background:#fff}
.dy-box .pb-more{max-width:36em;margin-top:16px}
.dy-pl{display:flex;flex-wrap:wrap;gap:8px}
.dy .pb-more-btn{color:var(--plum-600);border-color:rgba(100,8,46,.34);background:rgba(255,255,255,.7)}
.dy-end{margin-block:6px 0; margin-inline:64px 0}
.dy-replay svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* the phone stays beside the steps; a typing bubble and a star float by it */
.dy-side{position:sticky;top:max(92px,calc(50svh - 360px))}
.dy-float{position:absolute;z-index:3;height:auto;pointer-events:none;filter:drop-shadow(0 16px 14px rgba(70,8,36,.35));animation:k-float 7s ease-in-out infinite}
.dy-float--a{inset-inline-start:-84px;top:30%;width:98px;--r:-8deg}
.dy-float--b{inset-inline-end:-24px;bottom:16%;width:52px;--r:12deg;animation-duration:8.4s;animation-delay:-3s}
.dy-inline{display:none}

@media (max-width:1100px){.dy-speeds{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
  .dy-grid{grid-template-columns:minmax(0,1fr);margin-top:36px}
  .dy-side{display:none}
  .dy-steps::before{top:42px;bottom:42px}
  .dy-step{min-height:0;padding-block:16px; padding-inline:56px 0}
  .dy-node{top:38px;width:40px}
  .dy-box,.dy-step.dy-on .dy-box{background:var(--k-paper);box-shadow:var(--k-paper-shadow)}
  .dy-box{padding:22px 20px 24px}
  .dy-box h3{color:var(--plum-600)}
  .dy-inline{display:block;max-width:380px;margin-top:18px}
  .dy-end{margin-inline-start:56px}
}
@media (max-width:560px){
  .dy-speeds{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .dy-sp{padding:14px 14px 16px;gap:10px}
  .dy-spic{height:44px}
  .dy-sptx span{display:none}
  .dy-steps::before{inset-inline-start:15px}
  .dy-step{padding-inline-start:40px}
  .dy-node{width:30px;top:40px}
  .dy-box{padding:20px 16px 22px}
  .dy-end{margin-inline-start:40px}
}
@media (prefers-reduced-motion:reduce){
  .dy-secs i::after,.dy-float{animation:none}
  .dy-sp,.dy-spic img,.dy-spst img,.dy-node,.dy-node img,.dy-box,.dy-box h3,.dy-beat u{transition:none}
}