/* Homes: this stop's own drawings (05-17 sections.homes). Shared looks are in living/explain.css. */
.dose { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 26px; align-items: stretch; }
.dose canvas { width: 100%; height: auto; aspect-ratio: 600 / 380; border-radius: 16px; background: #120E16; display: block; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tab { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--rule); background: #FBF8F3; font: 600 13.5px/1 var(--wum-body); color: var(--ink); cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.tab[aria-pressed="true"] { background: var(--ink); color: #FFF4EA; border-color: var(--ink); }
.dread { display: grid; align-content: center; gap: 12px; padding: 22px; border-radius: 16px; background: #FBF8F3; border: 1px solid var(--rule); }
.dread .shield { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 6px 10px; border-radius: 999px; background: #EFE8DE; font: 600 12px/1 var(--wum-body); }
.dread .meter { position: relative; height: 12px; border-radius: 8px; background: #EFE8DE; overflow: hidden; }
.dread .meter i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, #E9B45C, #D04A28); transition: width 0.9s cubic-bezier(.3,.7,.2,1); }
.dread h4 { margin: 0; font: 700 26px/1 var(--wum-display); text-transform: uppercase; }
.dread p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rung { display: grid; grid-template-rows: auto 170px auto auto; gap: 10px; }
.rung .d { font: 700 22px/1 var(--wum-display); color: var(--rust); }
.rung svg { width: 100%; height: 170px; }
.rung b { font: 700 17px/1.1 var(--wum-display); text-transform: uppercase; }
.rung p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.push { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 34px; align-items: center; }
.push svg { border-radius: 16px; max-width: 540px; justify-self: center; }
.push svg { width: 100%; height: auto; }
.push .fix { margin: 14px 0 0; padding: 14px 16px; border-left: 3px solid var(--rust); background: #FBF0E8; font-size: 14.5px; line-height: 1.5; border-radius: 0 12px 12px 0; }
@media (max-width: 960px) {
  .dose, .push { grid-template-columns: minmax(0, 1fr); }
  .ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}