.cu-fig { container-type: inline-size; margin: 1.6rem 0; }
.cu-fig figcaption, .cu-pic figcaption { font-size: .82rem; color: var(--slate); margin-top: .8rem; line-height: 1.45; }
.cu-fig figcaption a { overflow-wrap: anywhere; }
.cu-fig p { margin: 0; }
.cu-fig-title { font-family: var(--display); font-weight: 600; font-size: 1.1rem; margin: 0 0 .8rem !important; }
.article .refs a { overflow-wrap: anywhere; }
.cu-pics-note { font-size: .85rem; color: var(--slate); }
.cu-pic { margin: 1.6rem 0; }
.cu-pic img { display: block; width: 100%; height: auto; border-radius: 3px; }
.cu-drive { position: relative; background: color-mix(in oklab, var(--sandstone) 55%, var(--paper)); border-radius: 3px; padding: 1rem clamp(.6rem, 3cqi, 1.2rem) 0; overflow: hidden; }
.cu-pile-wrap { display: flex; flex-direction: column; align-items: center; margin-bottom: .4rem; }
.cu-pile { width: min(260px, 70%); height: auto; }
.cu-pile .cu-p-tin { fill: var(--slate); } .cu-pile .cu-p-bottle { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.cu-pile .cu-p-tv, .cu-pile .cu-p-tower { fill: var(--ink); } .cu-pile .cu-p-mattress { fill: var(--cream); stroke: var(--slate); stroke-width: 2; }
.cu-pile .cu-p-scooter { fill: none; stroke: var(--fig); stroke-width: 4; stroke-linecap: round; } .cu-pile .cu-p-wheel { fill: var(--ink); }
.cu-pile .cu-p-ground { stroke: var(--sand-dk); stroke-width: 3; }
.cu-pile-lab { font-family: var(--display); font-weight: 600; font-size: 1rem; }
.cu-lanes { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; position: relative; }
@container (min-width: 600px) {
.cu-lanes { grid-template-columns: 1fr 1.6fr 1fr 1.2fr 1.2fr; gap: .5rem; }
.cu-lanes::before { content: ""; position: absolute; left: 10%; right: 10%; top: -.9rem; height: 2px; background: var(--sand-dk); }
}
.cu-lane { --lc: var(--slate); position: relative; background: var(--paper); border-top: 6px solid var(--lc); border-radius: 2px; padding: .75rem .8rem 1rem; font-size: .88rem; line-height: 1.4; }
@container (min-width: 600px) {
.cu-lane::before { content: ""; position: absolute; left: 50%; top: -1rem; width: 2px; height: 1rem; background: var(--sand-dk); }
.cu-lane { padding-bottom: 1.6rem; }
}
.cu-lane.is-council { --lc: var(--sand-dk); }
.cu-lane.is-crc { --lc: var(--slate); }
.cu-lane.is-bcycle { --lc: var(--verdigris); }
.cu-lane.is-ewaste { --lc: var(--ink); }
.cu-lane.is-mattress { --lc: var(--fig); }
.cu-lane-n { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--lc); color: var(--paper); font-weight: 700; font-size: .8rem; margin-bottom: .35rem; }
.cu-lane.is-council .cu-lane-n { color: var(--ink); }
.cu-lane-name { font-family: var(--display); font-weight: 600; font-size: .98rem; margin-bottom: .3rem !important; }
.cu-lane-note { margin-top: .55rem !important; padding-top: .5rem; border-top: 1px dotted color-mix(in oklab, var(--slate) 45%, transparent); color: var(--slate); font-size: .82rem; }
.cu-street { height: 1.6rem; margin: .7rem calc(-1 * clamp(.6rem, 3cqi, 1.2rem)) 0; background: var(--ink); background-image: linear-gradient(90deg, var(--paper) 50%, transparent 50%); background-size: 2.4rem 3px; background-repeat: repeat-x; background-position: 0 50%; }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
.cu-sortfig .cu-lane { transition: transform .5s var(--ease-settle), opacity .5s var(--ease-settle); transition-delay: calc(var(--i) * 90ms + 120ms); }
.cu-sortfig.reveal:not(.in) .cu-lane { transform: translateY(-14px); opacity: 0; }
}
.cu-check { background: var(--paper); border: 1px solid color-mix(in oklab, var(--slate) 22%, transparent); border-top: 6px solid var(--slate); border-radius: 3px; padding: 1rem clamp(.8rem, 3cqi, 1.3rem) .9rem; }
.cu-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.cu-ticks li { background: var(--riverlight); border-radius: 3px; padding: .55rem .8rem; font-size: .93rem; line-height: 1.4; }
.cu-ticks label { display: flex; gap: .65rem; align-items: flex-start; cursor: pointer; min-height: 28px; }
.cu-ticks input { width: 1.15rem; height: 1.15rem; margin: .18rem 0 0; flex: 0 0 auto; accent-color: var(--fig); }
.cu-ticks input:checked + span { color: color-mix(in oklab, var(--ink) 55%, transparent); text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--fig) 70%, transparent); }
.cu-scalefig { background: var(--paper); border: 1px solid color-mix(in oklab, var(--slate) 22%, transparent); border-radius: 3px; padding: 1rem clamp(.7rem, 3cqi, 1.3rem) .9rem; }
.cu-scale { display: grid; gap: .5rem; }
.cu-band { border-radius: 2px; padding: .7rem .8rem; font-size: .88rem; line-height: 1.4; }
.cu-band-k { font-weight: 700; margin-bottom: .25rem !important; }
.cu-band.is-small { background: color-mix(in oklab, var(--verdigris) 22%, var(--paper)); border-left: 5px solid var(--verdigris); }
.cu-band.is-large { background: color-mix(in oklab, var(--slate) 14%, var(--paper)); border-left: 5px solid var(--slate); }
.cu-band.is-over { background: var(--paper); border: 2px dashed var(--ink); }
.cu-axis { display: none; }
@container (min-width: 600px) {
.cu-scale { grid-template-columns: 2fr 6fr 2.2fr; gap: 0; }
.cu-band.is-small, .cu-band.is-large { border-left: 0; border-bottom: 6px solid var(--verdigris); }
.cu-band.is-large { border-bottom-color: var(--slate); }
.cu-band.is-over { border: 0; border-left: 4px solid var(--ink); background: repeating-linear-gradient(-45deg, var(--paper) 0 8px, color-mix(in oklab, var(--slate) 10%, var(--paper)) 8px 16px); }
.cu-axis { display: grid; grid-template-columns: 2fr 6fr 2.2fr; font-size: .78rem; color: var(--slate); margin: .25rem 0 0 !important; }
}
.cu-side { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.cu-side li { background: var(--riverlight); border-radius: 2px; padding: .35rem .6rem; font-size: .84rem; }
.cu-pathfig { background: var(--paper); border: 1px solid color-mix(in oklab, var(--slate) 22%, transparent); border-radius: 3px; padding: 1rem clamp(.7rem, 3cqi, 1.3rem) .9rem; }
.cu-start { display: inline-block; background: var(--fig); color: var(--paper); font-weight: 700; border-radius: 2px; padding: .35rem .7rem; }
.cu-path { list-style: none; margin: .5rem 0 0; padding: 0 0 0 1rem; border-left: 3px solid var(--fig); }
.cu-q { position: relative; padding: .7rem 0 .2rem .9rem; }
.cu-q::before { content: ""; position: absolute; left: -1.55rem; top: 1rem; width: .8rem; height: .8rem; transform: rotate(45deg); background: var(--paper); border: 2px solid var(--fig); }
.cu-q-text { font-family: var(--display); font-weight: 600; }
.cu-yes { margin-top: .3rem !important; background: var(--riverlight); border-radius: 2px; padding: .4rem .6rem; font-size: .9rem; }
.cu-no { margin-top: .3rem !important; font-size: .85rem; color: var(--slate); }
.cu-tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--fig); margin-right: .3rem; }
.cu-no .cu-tag { color: var(--slate); }
.cu-end { position: relative; margin-top: .4rem; padding: .7rem .8rem; background: var(--fig); color: var(--paper); border-radius: 2px; font-weight: 600; font-size: .92rem; }
.cu-foot { margin-top: .8rem !important; font-size: .86rem; border-left: 4px solid var(--sand-dk); padding-left: .6rem; }
.cu-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.cu-row { display: grid; gap: .2rem; background: var(--paper); border: 1px solid color-mix(in oklab, var(--slate) 22%, transparent); border-left: 6px solid var(--rc); border-radius: 2px; padding: .6rem .8rem; --rc: var(--fig); }
.cu-row.is-r2 { --rc: var(--slate); } .cu-row.is-r3 { --rc: var(--verdigris); } .cu-row.is-r4 { --rc: var(--sand-dk); }
@container (min-width: 560px) { .cu-row { grid-template-columns: 15rem 1fr; align-items: baseline; } }
.cu-row-k { font-weight: 700; font-size: .93rem; }
.cu-row-v { font-size: .9rem; }
.cu-table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid color-mix(in oklab, var(--slate) 25%, transparent); font-size: .9rem; }
.cu-table th, .cu-table td { padding: .6rem .7rem; text-align: left; vertical-align: top; border-bottom: 1px solid color-mix(in oklab, var(--slate) 18%, transparent); line-height: 1.4; }
.cu-table thead th { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--paper); background: var(--slate); font-weight: 600; }
.cu-table tbody th { font-weight: 600; width: 20%; }
@container (max-width: 559px) {
.cu-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cu-table, .cu-table tbody, .cu-table tr, .cu-table th, .cu-table td { display: block; width: auto; }
.cu-table tbody tr { padding: .75rem .9rem; border-bottom: 1px solid color-mix(in oklab, var(--slate) 18%, transparent); }
.cu-table tbody th, .cu-table tbody td { padding: 0; border-bottom: 0; width: auto; }
.cu-table tbody th { margin-bottom: .35rem; font-family: var(--display); }
.cu-table td { margin-top: .3rem; }
.cu-table td::before { content: attr(data-label); display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); font-weight: 600; }
}