/* The ritual v3, "clean". Default (static and phones): the five steps stacked, a 4:5 photo card with the words beneath.
   .r-live (ritual.js, from 761 px): one pinned stage. Columns: a 64 px chapter rail, the words (38 percent), the photo. */
.ritual{background:var(--umber);color:var(--off);position:relative;overflow:clip}
.ritual .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.r-stage{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto;padding-block:clamp(64px,8vw,112px)}
.r-chap{display:none}
.ritual .r-label{color:rgba(251,247,238,.72);margin-bottom:clamp(26px,3vw,40px)}
.r-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:56px clamp(20px,2vw,32px)}
.r-step{min-width:0}
.r-fig{margin:0;position:relative;width:100%;max-width:360px;aspect-ratio:4/5;border-radius:8px;overflow:clip;background:var(--umber-2);box-shadow:0 30px 60px rgba(0,0,0,.35)}
.r-fig picture{display:block;width:100%;height:100%}
.r-fig img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);display:block;transform-origin:50% 50%}
.r-copy{margin-top:24px}
.r-head{display:flex;align-items:baseline;gap:.32em;flex-wrap:wrap}
.r-num{font-family:var(--font-display);font-size:34px;line-height:1;color:var(--amber);font-weight:330;font-variation-settings:"opsz" 144,"SOFT" 40;letter-spacing:-.01em}
.ritual .r-title{font-size:34px;line-height:1;color:var(--off)}
.r-line{font-size:19px;line-height:1.45;max-width:32ch;margin-top:12px;color:rgba(251,247,238,.86)}
.r-buy{display:flex;align-items:center;gap:10px 16px;margin-top:22px;font-size:16px;font-weight:600;flex-wrap:wrap}
.r-buy-price{font-family:var(--font-display);font-size:24px;font-weight:360;font-variation-settings:"opsz" 144,"SOFT" 40}
.ritual .r-add{min-height:44px;padding:0 22px;font-size:16px}
@media (max-width:760px){
  .r-steps{grid-template-columns:minmax(0,1fr);gap:52px}
  .r-num,.ritual .r-title{font-size:44px}
  .r-line{font-size:17px}
}

/* live stage (from 761 px) */
.ritual.r-live{height:100svh}
.r-live .r-stage{height:100%;width:min(100%,calc(var(--max) + 2*var(--gutter)));display:grid;grid-template-columns:64px minmax(0,38%) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);column-gap:clamp(20px,3vw,48px);padding:76px var(--gutter) 24px 0}
.r-live .r-steps,.r-live .r-step{display:contents}
.r-live .r-label{grid-area:2/2;align-self:start;margin:0;line-height:18px}
.r-live .r-copy{grid-area:2/2;align-self:start;margin-top:52px;will-change:transform,opacity}
.r-live .r-head{gap:20px;flex-wrap:nowrap}
.r-live .r-num,.r-live .r-title{font-size:clamp(40px,5.1vw,56px)}
.r-live .r-line{margin-top:18px}
.r-live .r-fig{grid-area:2/3;justify-self:center;align-self:center;width:min(58svh,600px,100%);max-width:none;will-change:transform,opacity}
/* the chapter rail: 01 to 05, the active one bright, a 2 px terracotta thumb slides between them */
.r-live .r-chap{display:block;grid-area:2/1;align-self:start;position:relative;padding-left:26px}
.r-chap span{display:block;height:36px;font-family:var(--font-sans);font-size:12px;line-height:18px;font-weight:600;letter-spacing:.11em;color:var(--off);opacity:.45}
.r-chap span:first-child{opacity:1}
.r-thumb{position:absolute;left:12px;top:0;width:2px;height:36px;will-change:transform}
.r-thumb::before{content:"";position:absolute;left:0;top:0;width:2px;height:18px;border-radius:1px;background:var(--terracotta)}