/* Why Arcadia: this stop's own drawings (05-17 sections.plain). Shared looks are in living/explain.css. */
.pl-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.pl-rule { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 8px; padding: 14px 14px 16px; border-radius: 16px; background: rgba(255,252,247,0.84); border: 1px solid rgba(60,40,30,0.12);
  box-shadow: 0 8px 24px -16px rgba(60,30,10,0.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color 0.4s ease, background 0.4s ease; transition-delay: calc(var(--k) * 0.35s); }
.pl-rule svg { width: 100%; height: 74px; }
.pl-rule b { font: 700 19px/1.05 var(--wum-display); text-transform: uppercase; color: #1D1210; }
.pl-rule p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: #3E2F27; }
.pl-tick { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #3F9B63; box-shadow: 0 4px 12px -4px rgba(30,90,50,0.7);
  transform: scale(0); opacity: 0; transition: transform 0.45s cubic-bezier(.3,1.6,.5,1), opacity 0.3s; transition-delay: calc(var(--k) * 0.35s + 0.2s); }
.pl-tick svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pl-rules.done .pl-tick { transform: scale(1); opacity: 1; }
.pl-rules.done .pl-rule { border-color: rgba(63,155,99,0.55); background: rgba(250,255,251,0.9); }
.pl-band, .pl-crater { display: block; width: 100%; height: auto; }
@media (max-width: 960px) { .pl-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pl-rules { grid-template-columns: minmax(0, 1fr); } .pl-rule { grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: none; align-items: center; } .pl-rule svg { height: 64px; } }
@media (prefers-reduced-motion: reduce) { .pl-rule, .pl-tick { transition: none; } }