/* lucille.lol/status. Tokens live in site.css. */
.check{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:36px}
.check .btn .e{width:24px;height:24px;vertical-align:0}
.check .btn:disabled{opacity:.7;cursor:progress}
.when{font-size:var(--s-small);color:var(--muted);font-variant-numeric:tabular-nums}
.page-plate img.fade{opacity:0;transform:scale(.94)}
.page-head[data-state="online"] .page-plate{background:var(--pink)}
.page-head[data-state="offline"] .page-plate{background:var(--tone-2)}

/* right now: one big rose field for uptime, the other figures as a list beside it */
.now{margin-top:clamp(80px,9vw,140px)}
.now h2,.work h2,.elsewhere h2{font-size:var(--s-head);line-height:1}
.now-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:40px;align-items:stretch}
.awake{grid-column:1 / span 5;background:var(--rose);color:var(--on-accent);padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:360px}
.awake .k{font:600 var(--s-state) var(--display)}
.awake .big{font:600 clamp(52px,6.4vw,104px)/.95 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.awake .since{font-size:var(--s-body)}
.figures{grid-column:7 / -1;margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:8px}
.figures div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 0}
.figures div:nth-child(odd){background:var(--tone);margin-inline:-20px;padding-inline:20px}
.figures dt{display:flex;align-items:center;gap:12px;font-size:var(--s-body)}
.figures dd{margin:0;font:600 var(--s-state)/1 var(--display);font-variant-numeric:tabular-nums}

/* how hard she's working */
.work{margin-top:var(--gap-section);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.work-copy{grid-column:1 / span 5}
.work-copy p{margin-top:24px;max-width:40ch}
.meters{grid-column:7 / -1;display:flex;flex-direction:column;gap:40px;padding-top:8px}
.mk{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--s-body)}
.mk b{font:600 var(--s-state) var(--display);font-variant-numeric:tabular-nums}
.meter .track{margin-top:14px;height:28px;border-radius:var(--radius);background:var(--tone-2);overflow:hidden}
.meter .track i{display:block;height:100%;background:var(--peach);border-radius:var(--radius);transform-origin:left;transform:scaleX(0);transition:transform .8s var(--ease)}
.meter .track[data-level="warm"] i{background:var(--pink)}
.meter .track[data-level="high"] i{background:var(--rose)}

/* draw together: the sketch site itself, on a peach field */
.elsewhere{margin-top:var(--gap-section)}
.sketch{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;background:var(--peach);color:var(--on-accent);
  text-decoration:none;padding:clamp(28px,4vw,64px)}
.sketch-copy{grid-column:1 / span 5;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.sketch h2{font-size:var(--s-head);line-height:1}
.sketch p{max-width:36ch}
.sketch .btn{background:var(--ground);color:var(--ink)}
.sketch:hover .btn{background:var(--tone-2)}
.sketch .btn .e{width:24px;height:24px;vertical-align:0}
.shot{grid-column:7 / -1;width:100%;height:auto;transition:transform .4s var(--ease)}
.sketch:hover .shot{transform:rotate(-1.5deg) scale(1.02)}
.load-cat{width:min(220px,60%);height:auto;margin-top:32px;transition:opacity .25s var(--ease),transform .4s var(--ease)}
.load-cat.fade{opacity:0;transform:scale(.94)}


@media (max-width:900px){
  .now-grid,.work{grid-template-columns:1fr;row-gap:32px}
  .awake,.figures,.work-copy,.meters{grid-column:1}
  .awake{min-height:0;margin-inline:calc(-1 * max(var(--margin),env(safe-area-inset-left,0px)))}
  .figures div:nth-child(odd){margin-inline:-12px;padding-inline:12px}
  .sketch{grid-template-columns:1fr;row-gap:28px;margin-inline:calc(-1 * max(var(--margin),env(safe-area-inset-left,0px)))}
  .sketch-copy,.shot{grid-column:1}
  .load-cat{width:140px;margin-top:24px}
}
@media (max-width:640px){.hide-sm{display:none}}
@media (prefers-reduced-motion:reduce){.meter .track i{transition:none}}