.hb-intro { padding-block: 3rem 2rem; max-width: 850px; }
.hb-intro h1, .hb-article h1 { font-family: var(--font-display); font-size: clamp(2.25rem, 6vw, 4rem); line-height: 1.1; margin-block: 1rem; }
.hb-label { font-family: var(--font-mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.hb-lead { font-size: 1.35rem; line-height: 1.5; }
.hb-note, .hb-credit { font-size: .9rem; color: var(--ink-3); }
.hb-index { padding-bottom: 4rem; }
.hb-search { max-width: 42rem; margin-bottom: 2rem; }
.hb-search label { display: block; font-weight: 700; margin-bottom: .5rem; }
.hb-search input { width: 100%; min-height: 48px; padding: .8rem; font: inherit; border: 1px solid var(--navy); border-radius: .4rem; background: var(--paper); color: var(--navy); }
.hb-chapters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.hb-chapter { display: block; border: 1px solid var(--line); padding: 1.5rem; background: var(--paper); color: var(--navy); text-decoration: none; border-radius: .6rem; }
.hb-chapter:hover { border-color: var(--navy); }
.hb-chapter h2 { margin-block: .75rem; font-family: var(--font-display); font-size: 1.5rem; }
.hb-chapter > span:last-child { font-weight: 700; }
.hb-article { max-width: 760px; padding-block: 2.5rem 4rem; }
.hb-article header { margin-bottom: 2rem; }
.hb-contents { border-block: 1px solid var(--line); padding-block: 1rem; }
.hb-contents summary { min-height: 44px; cursor: pointer; font-weight: 700; }
.hb-contents a, .hb-sources a, .hb-credit a { display: inline-block; padding-block: .65rem; }
.hb-block { padding-block: 1rem; scroll-margin-top: 2rem; }
.hb-example { background: var(--paper); border-left: 4px solid var(--amber); padding-inline: 1rem; }
.hb-flow { list-style: none; padding: 0; display: grid; gap: .5rem; }
.hb-flow li { display: flex; align-items: center; gap: 1rem; background: var(--navy); color: var(--cream); padding: 1rem; border-radius: .4rem; }
.hb-flow li span { font-family: var(--font-mono); color: var(--amber); flex-shrink: 0; }
.hb-checklist { list-style: none; padding: 0; }
.hb-checklist label { display: flex; align-items: flex-start; gap: .75rem; padding-block: .75rem; cursor: pointer; }
.hb-checklist input { width: 1.25rem; height: 1.25rem; margin-top: .3rem; flex-shrink: 0; accent-color: var(--navy); }
.hb-photo { margin: 1rem 0; }
.hb-enlarge { display: block; border: 1px solid var(--line); padding: 1rem; background: #fff; text-align: center; }
.hb-enlarge img { display: block; width: 100%; height: 20rem; object-fit: contain; }
.hb-enlarge span { display: block; padding-top: .75rem; }
.hb-photo figcaption { padding-top: 1rem; }
.hb-money { width: 100%; border-collapse: collapse; }
.hb-money caption { text-align: left; padding-block: .5rem; }
.hb-money th { text-align: left; font-weight: 400; }
.hb-money td { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.hb-money td, .hb-money th { padding: .75rem .5rem; border-bottom: 1px solid var(--line); }
.hb-money .hb-total { background: var(--navy); color: var(--cream); }
.hb-next { display: flex; gap: 1rem; justify-content: space-between; border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1rem; }
.hb-next a { padding-block: .75rem; }
.hb-dialog { width: min(960px, 94vw); max-height: 94dvh; padding: 1rem; border: 0; border-radius: .5rem; background: var(--cream); color: var(--navy); }
.hb-dialog::backdrop { background: rgb(0 0 0 / .8); }
.hb-dialog h2 { margin-top: 0; }
.hb-toolbar { position: sticky; top: 0; background: var(--cream); display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding-block: .5rem; }
.hb-toolbar button { min-width: 44px; min-height: 44px; font: inherit; background: var(--navy); color: var(--cream); border: 0; border-radius: .3rem; padding: .5rem 1rem; cursor: pointer; }
.hb-toolbar button:last-child { margin-left: auto; }
.hb-zoom-area { overflow: auto; max-height: 65dvh; background: #fff; }
.hb-zoom-area img { display: block; max-width: none; margin-inline: auto; }
.hb-article a:focus-visible, .hb-index a:focus-visible, .hb-dialog button:focus-visible, .hb-search input:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
[hidden] { display: none !important; }
@media (max-width: 600px) { .hb-chapters { grid-template-columns: 1fr; } .hb-next { flex-direction: column; } }