/* ============================================================
   RITUAL — a day in five cups
   ============================================================ */
.ritual {
  background:
    linear-gradient(158deg, var(--band) 0%, oklch(24% 0.046 168) 100%);
  color: var(--on-dark);
  padding: var(--section-y) 0;
  position: relative; overflow: hidden;
}
.ritual::before {
  content: "茶";
  position: absolute; right: -3rem; top: 45%; transform: translateY(-50%);
  font-family: var(--serif); font-size: 34rem; line-height: 1;
  color: oklch(95.9% 0.008 79 / 0.025); pointer-events: none;
}
.ritual-line {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1rem, 2.2vw, 1.8rem);
  position: relative;
}
.ritual-line::before {
  content: ""; position: absolute; top: 5px; left: 2%; right: 2%;
  height: 1px; background: oklch(95.9% 0.008 79 / 0.16);
}
.ritual-stop { position: relative; padding-top: 2rem; }
.ritual-stop::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--band); border: 1.5px solid var(--gold);
  transition: background .4s, transform .4s var(--ease-out);
}
.ritual-stop:hover::before { background: var(--gold); transform: scale(1.25); }
.ritual-time {
  font: 600 .72rem var(--sans); letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold);
  display: block; margin-bottom: .6rem;
}
.ritual-img {
  width: 100%;
  box-shadow: 0 18px 40px -18px oklch(10% 0.02 168 / 0.85);
  margin: .4rem 0 1.1rem;
}
.ritual-img img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  transition: transform .8s var(--ease-out);
}
.ritual-stop:hover .ritual-img img { transform: scale(1.13); }
.ritual-stop:nth-child(2) .ritual-img { animation-delay: -4s; }
.ritual-stop:nth-child(3) .ritual-img { animation-delay: -8s; }
.ritual-stop:nth-child(4) .ritual-img { animation-delay: -12s; }
.ritual-stop:nth-child(5) .ritual-img { animation-delay: -16s; }
.ritual-name {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: .55rem;
}
.ritual-name em { font-style: italic; color: var(--gold); }
.ritual-desc { font-size: .9rem; color: var(--on-dark-soft); line-height: 1.6; }
.ritual-variety {
  margin-top: .9rem; font: 500 .68rem var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: oklch(95.9% 0.008 79 / 0.6);
}
.ritual-variety strong { color: var(--gold); font-weight: 600; }
@media (max-width: 880px) {
  .ritual-line { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
  .ritual-line::before { display: none; }
  .ritual-stop { display: flex; flex-direction: column; padding-top: 0; }
  .ritual-img { order: 1; max-width: 180px; margin-left: auto; margin-right: auto; }
  .ritual-stop::before { content: none; }
  .ritual-time {
    display: inline-flex; align-items: center; gap: .5rem;
    order: 2; margin: .7rem 0 0;
  }
  .ritual-time::before {
    content: ""; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
    background: var(--band); border: 1.5px solid var(--gold);
    transition: background .4s, transform .4s var(--ease-out);
  }
  .ritual-stop:hover .ritual-time::before,
  .ritual-stop:active .ritual-time::before {
    background: var(--gold); transform: scale(1.25);
  }
  .ritual-name { order: 3; }
  .ritual-desc { order: 4; }
  .ritual-variety { order: 5; }
}
/* at 2 columns, 5 stops leave the last one alone in its row — center it
   instead of letting it sit flush left against an empty second column */
@media (max-width: 880px) and (min-width: 521px) {
  .ritual-stop:nth-child(5) {
    grid-column: 1 / -1;
    max-width: 220px;
    margin: 0 auto;
  }
}
@media (max-width: 520px) {
  .ritual-line { grid-template-columns: 1fr; row-gap: 2.75rem; }
  .ritual-img { max-width: 160px; }
}