/* "The ritual" as three squares: the section pins under the header and each square
   scrubs its how-to clip as you scroll (canvas frames, see ritual-cubes.js).
   Without JS the three text steps stay readable. */
.rc { --sand: #eadfd2; --tan: #9a816b; padding-bottom: 40px; }
.rc-track { position: relative; }
.rc-stage {
  position: sticky; top: 88px; height: calc(100svh - 88px); min-height: 560px;
  display: flex; flex-direction: column; justify-content: center; gap: 34px;
  overflow: hidden;
}
.rc-fallback { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }

/* Row (desktop): three squares side by side */
.rc-row { display: flex; justify-content: center; gap: var(--gap, 40px); }
.rc-item { width: var(--s); display: flex; flex-direction: column; gap: 22px; }
.rc-cap { border-top: 1px solid var(--line); padding-top: 18px; transition: color .4s, border-color .4s; }
.rc-cap .rc-num { font-size: 11px; letter-spacing: 2px; color: var(--tan); }
.rc-cap h3 { font-size: clamp(22px, 2.2vw, 30px); margin: 14px 0 8px; letter-spacing: -.5px; }
.rc-cap p { font-size: 13px; line-height: 1.75; color: var(--muted); }
.rc-item.is-next .rc-cap { color: #a59a8f; }
.rc-item.is-next .rc-cap .rc-num, .rc-item.is-next .rc-cap p { color: #b3a89c; }
.rc-item.is-active .rc-cap { border-color: var(--wine); }
.rc-item.is-active .rc-cap .rc-num { color: var(--wine); }

.rc-tile { position: relative; width: var(--s); height: var(--s); max-width: 100%; overflow: hidden; background: var(--sand); transition: opacity .5s, box-shadow .5s; }
.rc-tile canvas, .rc-slide canvas { width: 100%; height: 100%; display: block; }
.rc-chip { position: absolute; left: 12px; top: 12px; font-size: 10px; letter-spacing: 1.6px; padding: 6px 8px; background: rgba(245, 240, 232, .9); }
.rc-wait {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: rgba(245, 240, 232, .72); transition: opacity .5s;
}
.rc-wait b { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: calc(var(--s) * .26); color: var(--wine); line-height: 1; }
.rc-wait span { font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase; }
.rc-item.is-active .rc-tile { box-shadow: 0 0 0 2px var(--wine); }
.rc-item.is-active .rc-wait, .rc-item.is-done .rc-wait { opacity: 0; }
.rc-item.is-done .rc-tile { opacity: .82; }

/* Single (phone): one big square that slides to the next clip; the caption swaps */
.rc-single { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.rc-slider { width: var(--s); height: var(--s); overflow: hidden; background: var(--sand); }
.rc-slides { display: flex; height: 100%; will-change: transform; }
.rc-slide { flex: 0 0 100%; height: 100%; }
.rc-single .rc-cap { width: var(--s); max-width: 100%; border-color: var(--wine); min-height: 120px; }
.rc-single .rc-cap .rc-num { color: var(--wine); }
.rc-single .rc-cap h3 { font-size: 27px; margin-top: 10px; }
.rc-cap-in { transition: opacity .3s; }
.rc-cap-in.swap { opacity: 0; }

/* Progress: one segment per clip */
.rc-progress { display: flex; gap: 10px; width: 100%; max-width: calc(var(--s) * 3 + var(--gap, 40px) * 2); margin: 0 auto; }
.rc-progress div { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.rc-progress span { display: block; height: 2px; background: var(--line); overflow: hidden; }
.rc-progress span i { display: block; height: 100%; background: var(--wine); transform: scaleX(0); transform-origin: left; }
.rc-progress small { font-size: 9px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--tan); }

@media (max-width: 800px) {
  .rc { padding-bottom: 20px; }
  .rc-stage { top: 73px; height: calc(100svh - 141px); min-height: 520px; gap: 22px; }
  .rc-fallback { grid-template-columns: 1fr; gap: 24px; }
  .rc-progress { max-width: var(--s); }
}
@media (prefers-reduced-motion: reduce) {
  .rc-tile, .rc-cap-in, .rc-wait { transition: none !important; }
}