/* The four dangers: this stop's own drawings (05-17 sections.dangers). Shared looks are in living/explain.css. */
.dg-four { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.dg-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border-radius: 16px; background: rgba(255,252,247,0.86); 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); }
.dg-card svg { width: 120px; height: 92px; border-radius: 12px; display: block; }
.dg-card small { display: block; font: 600 11px/1 var(--wum-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #C0663F; }
.dg-card .big { display: inline-block; margin-top: 6px; font: 700 30px/1 var(--wum-display); color: #1D1210; }
.dg-card em { margin-left: 6px; font-style: normal; font-size: 13px; color: #3E2F27; }
.dg-card p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: #3E2F27; }
.dg-bub { animation: dgBub 2.4s ease-in infinite; animation-delay: calc(var(--k) * -0.6s); transform-box: fill-box; }
@keyframes dgBub { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-62px) scale(1.6); opacity: 0; } }
.dg-ray { animation: dgRay 1.3s linear infinite; animation-delay: calc(var(--k) * -0.23s); }
@keyframes dgRay { 0% { transform: translateY(0); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(96px); opacity: 0; } }
.dg-grain { animation: dgGrain 3.2s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -0.31s); transform-box: fill-box; }
@keyframes dgGrain { 0% { transform: translate(0, 0); } 100% { transform: translate(3px, -2px); } }
.dg-press, .dg-heat { display: block; width: 100%; height: auto; }
@media (max-width: 960px) { .dg-four { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .dg-card { grid-template-columns: 92px minmax(0, 1fr); } .dg-card svg { width: 92px; height: 72px; } .dg-card .big { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .dg-bub, .dg-ray, .dg-grain { animation: none; } }