/* Original illustrations for the Bill of Entry article; no animation libraries. */
.be-toc { margin: 32px 0; padding: 24px 28px; background: #f1eee1; border-left: 3px solid #3e6a56; }
.post-content .be-toc p { margin: 0 0 12px; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.post-content .be-toc ol { margin: 0 0 0 20px; }
.post-content h2[id] { scroll-margin-top: 100px; }
.be-lab { --be-green: #b9e4c9; width: min(900px, calc(100vw - 48px)); margin: 44px 0 48px; position: relative; left: 50%; transform: translateX(-50%); border-radius: 18px; overflow: hidden; font-family: var(--font-body); line-height: 1.5; box-shadow: 0 18px 48px #19312a12; }
.be-lab *, .be-lab *::before, .be-lab *::after { box-sizing: border-box; }
.be-lab [hidden] { display: none !important; }
.be-lab-head { padding: 27px 32px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.be-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.be-tag { font-size: 10px; border: 1px solid currentColor; border-radius: 30px; padding: 5px 9px; }
.post-content .be-lab h3 { font-family: var(--font-heading); font-size: clamp(23px, 3.4vw, 33px); line-height: 1.3; margin: 22px 32px 10px; }
.post-content .be-lab .be-lab-intro { margin: 0 32px 24px; font-size: 14px; }
.be-lab svg { display: block; width: 100%; height: auto; font-family: var(--font-body); }
.be-lab button { cursor: pointer; font-family: inherit; font-size: 13px; line-height: 1.4; min-height: 44px; border: 1px solid transparent; border-radius: 6px; padding: 10px 14px; transition: background .2s, color .2s; }
.be-lab button:focus-visible { outline: 3px solid #dc964e; outline-offset: 3px; }
.be-lab figcaption { padding: 18px 32px 24px; font-size: 12px; line-height: 1.7; }
.be-clearance { background: #132d31; color: #d0ded3; border: 1px solid #37544f; }
.be-clearance .be-lab-head { color: #b1c9b9; }
.post-content .be-clearance h3 { color: #fbf3db; }
.be-control-bar { display: flex; align-items: center; justify-content: space-between; margin: 0 32px 8px; gap: 12px; }
.be-control-bar button { background: #f2c18a; color: #28372b; font-weight: 700; min-width: 153px; }
.be-control-bar button:hover { background: #ffd6a6; }
.be-control-bar > span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.be-clearance-scene { overflow: hidden; }
.be-cargo { transform: translateX(0); transition: transform 1.2s cubic-bezier(.45,0,.2,1); }
.be-gate { transform-box: fill-box; transform-origin: left center; rotate: 0deg; transition: rotate .7s ease; }
.be-stamp { opacity: 0; transform-origin: 134px 130px; transform: scale(1.4) rotate(-12deg); transition: opacity .25s, transform .4s cubic-bezier(.2,1.5,.5,1); }
.be-clearance[data-step="1"] .be-cargo { transform: translateX(70px); }
.be-clearance[data-step="2"] .be-cargo { transform: translateX(145px); }
.be-clearance[data-step="3"] .be-cargo { transform: translateX(230px); }
.be-clearance[data-step="4"] .be-cargo { transform: translateX(320px); }
.be-clearance[data-step="5"] .be-cargo { transform: translateX(500px); }
.be-clearance[data-step="4"] .be-gate, .be-clearance[data-step="5"] .be-gate { rotate: -78deg; }
.be-clearance[data-step="4"] .be-stamp, .be-clearance[data-step="5"] .be-stamp { opacity: 1; transform: scale(1) rotate(-12deg); }
.be-clearance[data-step="4"] .be-signal, .be-clearance[data-step="5"] .be-signal { fill: #abe3bd; }
.be-stage-buttons { display: grid; grid-template-columns: repeat(6, 1fr); padding: 18px 24px; gap: 6px; border-top: 1px solid #42554f; }
.be-stage-buttons button { background: transparent; color: #c2d1c4; text-align: left; padding: 9px 12px; }
.be-stage-buttons button span { display: block; font-size: 10px; opacity: .8; margin-bottom: 5px; }
.be-stage-buttons button:hover { background: #29463e; }
.be-stage-buttons button[aria-pressed="true"] { color: #172f28; background: #c0ddba; }
.be-stage-detail { display: flex; gap: 18px; margin: 0 32px; padding: 23px 0 8px; border-top: 1px solid #42554f; min-height: 140px; }
.be-detail-number { font: 38px/1 Georgia, serif; color: #eabc89; }
.be-stage-detail h4 { font-size: 18px; line-height: 1.4; margin: 0 0 8px; color: #fff6e3; }
.post-content .be-stage-detail p { font-size: 14px; margin: 0; max-width: 630px; }
.be-routes { background: #f4f0e3; border: 1px solid #d5d1bf; color: #375442; }
.post-content .be-routes h3 { color: #244635; }
.be-route-controls { margin: 0 32px 16px; display: flex; flex-wrap: wrap; gap: 7px; }
.be-route-controls button { background: #e4e2d2; color: #345241; }
.be-route-controls button[aria-pressed="true"] { background: #315f4a; color: #fff9e8; }
.be-route-controls button:hover { box-shadow: inset 0 0 0 1px #315f4a; }
.be-route-controls .be-replay { margin-left: auto; background: transparent; }
.be-direct-line, .be-bond-line { transition: opacity .3s; }
.be-routes[data-route="direct"] .be-bond-line, .be-routes[data-route="bond"] .be-direct-line { opacity: .15; }
.be-route-cargo { transform: translate(694px, 201px); }
.be-route-note { padding: 23px 32px 0; border-top: 1px solid #d5d1bf; min-height: 135px; }
.be-route-note > span { text-transform: uppercase; font-size: 11px; letter-spacing: .13em; color: #79532f; font-weight: 700; }
.post-content .be-route-note p { margin: 8px 0 0; font-size: 15px; }
.post-content .be-nojs { margin: 0 32px 24px; font-size: 14px; }
@media (max-width: 600px) {
 .be-lab { width: calc(100vw - 32px); border-radius: 12px; }
 .be-lab-head { padding: 20px 18px 0; }
 .be-tag { display: none; }
 .post-content .be-lab h3 { margin: 17px 18px 10px; }
 .post-content .be-lab .be-lab-intro { margin: 0 18px 20px; }
 .be-control-bar, .be-route-controls { margin-left: 18px; margin-right: 18px; }
 .be-stage-buttons { grid-template-columns: repeat(3, 1fr); padding: 12px; }
 .be-stage-buttons button span { display: inline; margin-right: 6px; }
 .be-stage-detail { margin: 0 18px; min-height: 173px; }
 .be-stage-detail h4 { font-size: 16px; }
 .be-lab figcaption { padding: 16px 18px 20px; }
 .be-route-note { padding: 20px 18px 0; min-height: 168px; }
 .be-route-controls button { font-size: 12px; padding: 10px; }
 .be-route-controls .be-replay { margin-left: 0; }
 .be-route-map { min-height: 185px; }
}
@media (prefers-reduced-motion: reduce) {
 .be-lab *, .be-lab *::before, .be-lab *::after { animation: none !important; transition: none !important; }
}
@media print {
 .be-lab { width: 100%; left: auto; transform: none; break-inside: avoid; box-shadow: none; }
 .be-lab button, .be-control-bar, .be-stage-buttons { display: none !important; }
}