/* case pages on top of v3 */
.grid { gap: 18px; }
.b { border-radius: 28px; }
.chero { position: relative; }
.chero .glow { position: absolute; width: 60%; aspect-ratio: 1; right: -10%; top: -30%; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(222,106,60,.85), rgba(243,180,140,.5) 40%, rgba(189,181,236,.3) 62%, transparent 72%); filter: blur(46px); pointer-events: none; }
.chero .display { font-family: var(--serif); font-weight: 300; letter-spacing: -0.03em; line-height: 1; }
.lilac .body, .lime .body, .butter .body, .sage .body, .peach .body { color: var(--ink-2); }
.tl { display: grid; grid-template-columns: 56px 1fr 72px; gap: 12px; align-items: center; font-size: 14px; margin-top: 12px; }
.tl b { font-weight: 500; text-align: right; }
.tl-bar { height: 12px; border-radius: 999px; background: rgba(36,26,22,.1); position: relative; }
.tl-bar i { position: absolute; left: 0; top: 0; bottom: 0; min-width: 12px; border-radius: 999px; background: var(--ink); }
.bar-row { grid-template-columns: 170px 1fr 48px; }
.bar-row small { font-size: 12px; }
.plain { margin: 0; }
.plain img { width: 100%; display: block; border-radius: 14px; box-shadow: 0 1px 0 rgba(36,26,22,.05), 0 24px 60px -30px rgba(36,26,22,.35); }
.plain figcaption { font-size: 14.5px; color: var(--ink-3); margin-top: 14px; max-width: 60ch; }
.side-txt { align-self: center; padding: 0 0 0 clamp(8px, 2vw, 24px); }
.film { width: 100%; display: block; border-radius: 14px; margin-top: clamp(40px, 6vw, 72px); box-shadow: 0 24px 60px -30px rgba(36,26,22,.35); }
.part { margin: clamp(110px, 14vw, 180px) 0 0; padding-top: 28px; border-top: 1px solid var(--line); }
.part span { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.part .h2 { font-size: clamp(40px, 5.2vw, 76px); margin-top: 10px; }
.part p { color: var(--ink-2); max-width: 54ch; margin: 14px 0 0; font-size: 17px; }
.film { margin-top: 14px; }