.hw-hero { margin: 0 0 2.2rem; }
.hw-hero img, .hw-pic img { display: block; width: 100%; height: auto; border-radius: 4px; }
.hw-fig { margin: 2.2rem 0; }
.hw-fig svg { width: 100%; height: auto; display: block; }
.hw-fig figcaption { margin-top: .7rem; }
.hw-fig .fig-source { font-family: var(--mono); font-size: .78rem; line-height: 1.5; color: var(--clr-rope-text); margin: 0; }
.hw-fig .fig-source a { color: inherit; }
.article-body .hw-fig .viz-wide { display: block; }
.article-body .hw-fig .viz-phone { display: none; }
@media (max-width: 700px) {
.article-body .hw-fig .viz-wide { display: none; }
.article-body .hw-fig .viz-phone { display: block; }
.article-body .hw-fig svg.viz-phone { max-width: 420px; }
}
.hw-note { margin: 0 0 .9rem; padding: .7rem .95rem; border-left: 3px solid var(--clr-angophora); background: var(--clr-shell); border-radius: 0 4px 4px 0; font-size: .98rem; line-height: 1.45; }
.article-body .hw-table { margin: 0; font-size: .95rem; }
.article-body .hw-table tbody th { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--clr-ink); white-space: nowrap; padding-right: 1.2rem; }
.hw-sw { display: inline-block; width: .8rem; height: 1.6rem; margin-right: .7rem; vertical-align: middle; border-radius: 2px; }
.hw-g1 .hw-sw { background: color-mix(in oklch, var(--clr-lighthouse) 55%, var(--clr-paper)); }
.hw-g2 .hw-sw { background: var(--clr-lighthouse); box-shadow: inset 0 -.55rem 0 var(--clr-angophora); }
.hw-g3 .hw-sw { background: var(--clr-angophora-deep); }
.hw-count text { font-family: var(--sans); font-size: 12.5px; fill: var(--clr-ink); }
.hw-count .tb { font-weight: 600; }
.hw-count .tm { font-family: var(--mono); font-size: 10.5px; fill: var(--clr-rope-text); }
.hw-count .axis { stroke: var(--clr-rope); stroke-width: 1.4; }
.hw-count .tick { stroke: var(--clr-rope); stroke-width: 1; }
.hw-count .lead { stroke: var(--clr-rope); stroke-width: 1; stroke-dasharray: 3 3; }
.hw-count .band-f { fill: color-mix(in oklch, var(--clr-lighthouse) 45%, var(--clr-paper)); }
.hw-count .band-w { fill: var(--clr-angophora); }
.hw-count .mk { fill: var(--clr-paper); stroke: var(--clr-pittwater); stroke-width: 2; }
.hw-count .mk-w { stroke: var(--clr-angophora-deep); }
.hw-count .end { fill: var(--clr-pittwater); }
.hw-count .clock { fill: var(--clr-paper); stroke: var(--clr-angophora-deep); stroke-width: 1.6; }
.hw-count .hand { stroke: var(--clr-angophora-deep); stroke-width: 1.6; stroke-linecap: round; }
.hw-count .note { fill: var(--clr-shell); }
.hw-tl { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--clr-rope); }
.hw-tl li { position: relative; margin: 0; padding: 0 0 1rem .9rem; font-size: .95rem; line-height: 1.45; }
.hw-tl li::before { content: ""; position: absolute; left: -1.1rem; margin-left: -7px; top: .3rem; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; background: var(--clr-paper); border: 2px solid var(--clr-pittwater); }
.hw-tl li.hw-tl-w::before { border-color: var(--clr-angophora-deep); background: var(--clr-angophora); }
.hw-tl li.hw-tl-end::before { background: var(--clr-pittwater); }
.hw-tl .d { display: block; font-family: var(--mono); font-size: .8rem; font-weight: 500; color: var(--clr-pittwater); }
.hw-tl .clock-t { display: block; margin-top: .35rem; padding: .4rem .6rem; background: var(--clr-shell); border-radius: 0 4px 4px 0; border-left: 3px solid var(--clr-angophora); font-size: .9rem; }
.hw-tl-note { margin: .3rem 0 0; padding: .6rem .8rem; background: var(--clr-shell); border-radius: 4px; font-size: .92rem; line-height: 1.45; }
.hw-sun text { font-family: var(--sans); font-size: 12.5px; fill: var(--clr-ink); }
.hw-sun .lbl { font-weight: 600; }
.hw-sun .lbl-heat { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; fill: var(--clr-angophora-deep); }
.hw-sun .ground { stroke: var(--clr-rope); stroke-width: 1.4; }
.hw-sun .arc { fill: none; stroke: var(--clr-lighthouse); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; }
.hw-sun .arc-hot { fill: none; stroke: var(--clr-angophora); stroke-width: 6; stroke-linecap: round; }
.hw-sun .sun { fill: var(--clr-lighthouse); stroke: var(--clr-angophora); stroke-width: 2; }
.hw-sun .ray { stroke: var(--clr-lighthouse); stroke-width: 2.2; stroke-linecap: round; }
.hw-sun .box { fill: var(--clr-shell); stroke: var(--clr-pittwater); stroke-width: 1.5; }
.hw-sun .tape { stroke: var(--clr-rope); stroke-width: 1.2; }
.hw-sun .brk { fill: none; stroke: var(--clr-pittwater); stroke-width: 1.2; }
.hw-sun .track { fill: none; stroke: var(--clr-rope); stroke-width: 1; stroke-dasharray: 2 3; }
.hw-sun .cup { fill: color-mix(in oklch, var(--clr-pittwater) 18%, var(--clr-paper)); stroke: var(--clr-pittwater); stroke-width: 1.3; }
.hw-sun .water { fill: color-mix(in oklch, var(--clr-pittwater) 45%, var(--clr-paper)); }
.hw-sun .rest { fill: var(--clr-pittwater); }
.hw-sun .hour { stroke: var(--clr-rope); stroke-width: 1; }
.hw-sun .person { fill: var(--clr-pittwater); }
.hw-sun .check { fill: none; stroke: var(--clr-angophora); stroke-width: 1.6; stroke-linecap: round; }
.hw-sun svg.viz-phone .lbl { font-size: 13px; }
.article-body .hw-signs { margin: 0; font-size: .93rem; }
.article-body .hw-signs thead th { white-space: nowrap; }
.article-body .hw-signs tbody th { font-family: var(--serif); font-size: 1rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--clr-ink); padding-left: .8rem; padding-right: 1rem; }
.article-body .hw-signs td:last-child { font-weight: 600; }
.hw-signs tr.s1 th { border-left: 5px solid color-mix(in oklch, var(--clr-lighthouse) 60%, var(--clr-paper)); }
.hw-signs tr.s2 th { border-left: 5px solid var(--clr-angophora); }
.hw-signs tr.s3 th { border-left: 5px solid var(--clr-angophora-deep); }
.hw-signs tr.s1 { background: color-mix(in oklch, var(--clr-lighthouse) 12%, var(--clr-paper)); }
.hw-signs tr.s2 { background: color-mix(in oklch, var(--clr-angophora) 10%, var(--clr-paper)); }
.hw-signs tr.s3 { background: color-mix(in oklch, var(--clr-angophora-deep) 16%, var(--clr-paper)); }
@media (max-width: 700px) {
.article-body .hw-signs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.article-body .hw-signs, .article-body .hw-signs tbody, .article-body .hw-signs tr, .article-body .hw-signs th, .article-body .hw-signs td { display: block; width: 100%; box-sizing: border-box; }
.article-body .hw-signs tr { margin: 0 0 .8rem; padding: .75rem .95rem; border-radius: 0 4px 4px 0; }
.hw-signs tr.s1 { border-left: 5px solid color-mix(in oklch, var(--clr-lighthouse) 60%, var(--clr-paper)); }
.hw-signs tr.s2 { border-left: 5px solid var(--clr-angophora); }
.hw-signs tr.s3 { border-left: 5px solid var(--clr-angophora-deep); }
.article-body .hw-signs tbody th { border-left: 0; padding-left: 0; }
.article-body .hw-signs tbody th, .article-body .hw-signs td { border-bottom: 0; padding: .15rem 0; }
.article-body .hw-signs td::before { content: attr(data-label); display: block; margin-top: .4rem; font-family: var(--mono); font-size: .7rem; font-weight: 400; letter-spacing: .05em; text-transform: uppercase; color: var(--clr-rope-text); }
}
.hw-check { margin: 0; padding: .9rem 1.1rem .6rem; border: 0; border-left: 3px solid var(--clr-pittwater); border-radius: 0 4px 4px 0; background: var(--clr-shell); min-width: 0; }
.hw-check legend { float: left; width: 100%; padding: 0; margin-bottom: .3rem; }
.hw-check ul { clear: both; list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.6rem; }
.hw-check li { margin: 0; break-inside: avoid; }
.hw-check label { display: flex; gap: .65rem; align-items: flex-start; min-height: 44px; padding: .5rem 0; line-height: 1.4; cursor: pointer; }
.hw-check input { flex: none; width: 1.15rem; height: 1.15rem; margin: .12rem 0 0; accent-color: var(--clr-pittwater); }
.hw-check label:has(input:checked) > span { color: var(--clr-rope-text); text-decoration: line-through; text-decoration-color: var(--clr-rope); }
.hw-vet { clear: both; margin: .6rem 0 .5rem; padding: .7rem .9rem; border-left: 4px solid var(--clr-angophora-deep); background: color-mix(in oklch, var(--clr-angophora-deep) 12%, var(--clr-paper)); border-radius: 0 4px 4px 0; font-weight: 600; line-height: 1.45; }
@media (max-width: 640px) { .hw-check ul { columns: 1; } }
.hw-load { display: grid; grid-template-columns: 1.25fr 1fr 1.25fr; gap: 1rem; }
.hw-bin { min-width: 0; padding: .9rem 1rem .7rem; background: var(--clr-shell); border-top: 4px solid var(--clr-pittwater); border-radius: 0 0 4px 4px; }
.hw-bin-check { border-top-color: var(--clr-lighthouse); }
.hw-bin-out { border-top-color: var(--clr-angophora-deep); background: color-mix(in oklch, var(--clr-angophora-deep) 9%, var(--clr-shell)); }
.article-body .hw-bin h3 { margin: 0 0 .6rem; font-family: var(--serif); font-size: 1.05rem; font-weight: 600; line-height: 1.3; color: var(--clr-ink); }
.hw-bin ul { list-style: none; margin: 0; padding: 0; }
.hw-bin li { margin: 0; padding: .5rem 0; border-top: var(--hairline); font-size: .93rem; line-height: 1.45; }
.hw-bin li b { font-weight: 600; color: var(--clr-pittwater); }
.hw-bin-out li b { color: var(--clr-angophora-deep); }
@media (max-width: 760px) { .hw-load { grid-template-columns: 1fr; } }
.hw-sum { margin: 0; padding: .4rem 1.2rem; background: var(--clr-shell); border-left: 6px solid transparent; border-image: linear-gradient(var(--clr-lighthouse), var(--clr-angophora-deep)) 1; list-style: none; columns: 2; column-gap: 2rem; }
.hw-sum li { break-inside: avoid; margin: 0; padding: .7rem 0; border-bottom: var(--hairline); font-size: .95rem; line-height: 1.45; }
.hw-sum li b { display: block; font-family: var(--serif); font-size: 1.02rem; font-weight: 600; color: var(--clr-ink); }
.hw-sum .src { font-family: var(--mono); font-size: .76rem; color: var(--clr-rope-text); }
.hw-sum .src a { color: inherit; }
@media (max-width: 700px) { .hw-sum { columns: 1; } }
.refs a { overflow-wrap: anywhere; }
@media print { .hw-fig, .hw-sum li, .hw-bin { break-inside: avoid; } }