/* Airlocks and suits: this stop's own drawings (05-17 sections.suits). Shared looks are in living/explain.css. */
.sd-wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.sd-cv { width: 100%; height: auto; aspect-ratio: 1200 / 640; border-radius: 16px; display: block; background: #C08562; }
.sd-side { display: grid; gap: 14px; }
.sd-facts { display: grid; gap: 10px; }
.sd-fact { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.72); border: 1px solid var(--rule); }
.sd-fact .ico { width: 24px; height: 24px; color: var(--rust); margin-top: 2px; }
.sd-fact b { font: 700 18px/1.1 var(--wum-display); text-transform: uppercase; }
.sd-fact p { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.sd-btn { display: inline-flex; align-items: center; gap: 10px; width: fit-content; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: #FFF4EA; font: 600 14px/1 var(--wum-body); cursor: pointer; transition: background 0.25s, color 0.25s; }
.sd-btn .ico { width: 18px; height: 18px; }
.sd-btn[aria-pressed="true"] { background: #FFD27A; color: var(--ink); border-color: #E0A63A; }
.sd-note { margin: 0; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.72); border: 1px solid var(--rule); font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.sr-rooms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--rule); }
.sr-rooms li { position: relative; padding: 18px 16px 16px; background: var(--t); color: var(--ink); display: grid; align-content: start; gap: 6px; }
.sr-rooms li:nth-child(-n+2) { color: #FFF4EA; }
.sr-rooms li:nth-child(-n+2) p { color: #F6E3D3; }
.sr-rooms li + li::before { content: ""; position: absolute; left: -9px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%) rotate(45deg); background: var(--t); border-top: 1px solid rgba(0,0,0,0.08); border-right: 1px solid rgba(0,0,0,0.08); z-index: 1; }
.sr-n { font: 700 13px/1 var(--wum-mono); opacity: 0.7; }
.sr-rooms b { font: 700 19px/1.05 var(--wum-display); text-transform: uppercase; }
.sr-rooms p { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.sr-rooms em { font: 600 11px/1.2 var(--wum-mono); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.sr-flow { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 14px; color: var(--muted); }
.sr-flow i { position: relative; flex: 0 0 120px; height: 2px; background: linear-gradient(270deg, #7CC8FF, #9C5A35); }
.sr-flow i::before { content: ""; position: absolute; left: -2px; top: -5px; border: 6px solid transparent; border-right: 9px solid #9C5A35; border-left: 0; }
.sp-svg { width: 100%; height: auto; max-width: 760px; display: block; }
.sp-bar { transform-box: fill-box; transform-origin: left; transform: scaleX(0); transition: transform 1.4s cubic-bezier(.3,.7,.2,1); }
.fig.in .sp-bar { transform: none; }
.sc-wrap canvas { width: 100%; height: auto; aspect-ratio: 1100 / 420; display: block; border-radius: 12px; }
.sc-key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; font-size: 14px; }
.sc-key span { display: inline-flex; align-items: center; gap: 8px; }
.sc-key i { width: 12px; height: 12px; border-radius: 50%; }
@media (max-width: 960px) {
  .sd-wrap { grid-template-columns: minmax(0, 1fr); }
  .sr-rooms { grid-template-columns: minmax(0, 1fr); }
  .sr-rooms li + li::before { left: 50%; top: -9px; transform: translateX(-50%) rotate(135deg); }
}
@media (prefers-reduced-motion: reduce) { .sp-bar { transition: none; transform: none; } }