figure svg.hn-w, figure svg.hn-p { display: block; width: 100%; max-width: none; height: auto; max-height: none; margin: 0; }
figure svg.hn-p { display: none; }
@media (max-width: 700px) { figure svg.hn-w { display: none; } figure svg.hn-p { display: block; } }
.figbox ol.keylist { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .45rem; }
.keylist li { display: flex; gap: .6rem; align-items: flex-start; margin: 0; font-size: .95rem; line-height: 1.45; }
.figbox .key { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--bn-baths); color: var(--bn-paper); font: 600 .8rem/1.5rem var(--font-spec); text-align: center; }
.figbox .callout { margin: .8rem 0 0; font-size: .95rem; line-height: 1.5; }
.prose ul.chance { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.chance li { margin: 0; }
.chance .ch-l { margin: 0 0 .35rem; font-size: .92rem; line-height: 1.4; }
.ch-track { position: relative; height: 24px; background: var(--bn-paper); border: 1px solid var(--bn-rule); }
.ch-fill { position: absolute; left: 0; top: 0; bottom: 0; }
.ch-muted { background: #8d9aa1; }
.ch-hot { background: var(--bn-flag); }
.ch-warm { background: #d98b2b; }
.ch-v { position: absolute; top: 50%; transform: translateY(-50%); padding-left: .45rem; font: 600 .84rem/1 var(--font-spec); white-space: nowrap; }
.ch-v--in { transform: translate(-100%, -50%); padding: 0 .45rem 0 0; }
.ch-hot + .ch-v--in { color: #fff; }
.ch-axis { position: relative; height: 1.3rem; margin: .35rem 0 0; font: 500 .74rem/1.3rem var(--font-spec); color: var(--bn-ink-soft); }
.ch-axis span { position: absolute; transform: translateX(-50%); }
.ch-axis span:first-child { transform: none; }
.ch-axis span:last-child { transform: translateX(-100%); }
.hw-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.hw-row--one { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hw-day { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.hw-t { display: flex; flex-direction: column; gap: .35rem; padding: .55rem .5rem .6rem; font: 500 .74rem/1.3 var(--font-spec); min-width: 0; }
.hw-t svg { display: block; width: 26px; height: 26px; max-width: none; margin: 0; }
.hw-hot-day { background: #f6e3b4; color: var(--bn-ink); }
.hw-hot-night { background: var(--bn-harbour); color: var(--bn-paper); }
.hw-cool-night { background: #dbe9f2; color: var(--bn-ink); }
.hw-bracket { margin: .5rem 0 0; padding-top: .45rem; border: 2px solid var(--bn-baths); border-bottom: 0; font: 600 .84rem/1.35 var(--font-spec); color: var(--bn-harbour); text-align: center; }
@media (max-width: 700px) {
.hw-row { grid-template-columns: 1fr; }
.hw-row--one { grid-template-columns: 1fr; }
.hw-t { flex-direction: row; align-items: center; font-size: .78rem; }
.hw-t svg { flex: none; width: 22px; height: 22px; }
}
.prose ul.hn-ticks, .prose ul.hn-signs { list-style: none; margin: 0; padding: 0; }
.hn-ticks li { margin: 0; }
.hn-ticks label { display: flex; gap: .7rem; align-items: flex-start; padding: .5rem 0; border-bottom: 1px solid var(--bn-rule); cursor: pointer; line-height: 1.4; }
.hn-ticks input { flex: none; width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; accent-color: var(--bn-baths); cursor: pointer; }
.hn-signs li { margin: 0; padding: .35rem 0 .35rem 1.2rem; position: relative; line-height: 1.4; }
.hn-signs li::before { content: ""; position: absolute; left: 0; top: .78rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--bn-flag); }
.figbox .hn-fan { display: flex; gap: .6rem; align-items: center; }
.hn-fan svg { flex: none; width: 28px; height: 28px; }
.figbox .hn-foot { margin: .5rem 0 0; font-size: .92rem; line-height: 1.45; color: var(--bn-ink-soft); }
.hn-two { display: grid; gap: 1.1rem; }
@media (min-width: 701px) { .hn-two { grid-template-columns: 1fr 1fr; } }
.hn-two svg { display: block; width: 100%; max-width: none; height: auto; max-height: none; margin: 0; }
.hn-lab { margin: .4rem 0 0; font: 600 .84rem/1.35 var(--font-spec); color: var(--bn-harbour); }
.prose ol.hn-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--bn-rule); border: 1px solid var(--bn-rule); }
@media (min-width: 701px) { .prose ol.hn-steps { grid-template-columns: 1fr 1fr; } }
.hn-steps li { margin: 0; padding: .8rem .9rem; background: var(--bn-paper); display: flex; flex-direction: column; gap: .35rem; }
.hn-steps p { margin: 0; font-size: .95rem; line-height: 1.42; }
.hn-steps .st-k { font: 600 .82rem/1.35 var(--font-spec); letter-spacing: .04em; text-transform: uppercase; color: var(--bn-baths); }
.hn-steps .st-s { margin-top: auto; padding-top: .25rem; font-size: .78rem; color: var(--bn-ink-soft); }