/* Mixed-model container loading */
.load-foot{margin-top:22px;font-size:.92rem;color:var(--haze);max-width:70ch}

/* skyline: packed units side by side, one scale */
.ld-skyline{margin:0;background:#fff;padding:clamp(20px,3vw,40px) clamp(16px,3vw,40px) 20px;box-shadow:0 24px 48px -36px rgba(31,36,39,.55)}
.ld-plot{container-type:inline-size}
.ld-plot>*{--gap:24px;--k:calc((100cqw - 5 * var(--gap)) / 958)}
.ld-floor{display:flex;align-items:flex-end;gap:var(--gap);border-bottom:3px solid var(--ink);padding-top:8px}
.ld-box{display:flex;flex-direction:column;justify-content:flex-end;width:calc(var(--l) * var(--k));flex:none}
.ld-box span{display:block;font-size:.8rem;line-height:1.3;color:var(--ink-2);padding-bottom:8px}
.ld-box b{display:block;font:600 1.15rem/1.05 var(--d);text-transform:uppercase;color:var(--ink)}
.ld-box::after{content:"";display:block;height:calc(var(--h) * var(--k));background:var(--haze-2);border:2px solid var(--asphalt);border-bottom:0}
.ld-box.steel::after{background:var(--haze);border-style:dashed}
.ld-scale{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:.8rem;font-weight:600;color:var(--ink-2)}
.ld-scale i{display:block;height:8px;width:calc(100 * var(--k));border:2px solid var(--ink);border-top:0}
.ld-skyline figcaption{margin-top:10px;font-size:.82rem;color:var(--ink-2);max-width:80ch}

.ld-table-wrap{margin-top:28px;box-shadow:0 24px 48px -36px rgba(31,36,39,.55)}
.ld-table td:nth-child(5),.ld-table td:nth-child(6){font:600 1.3rem/1.1 var(--d)}
.ld-table td.ns{font:400 .86rem/1.4 var(--f)}
.ld-vol{display:flex;align-items:center;gap:10px;white-space:nowrap}
.ld-vol i{display:block;height:12px;width:calc(var(--v) / 1.61 * 120px);background:var(--amber)}
.ld-vol.sheet i{background:var(--asphalt)}
.ld-note{max-width:80ch}

/* plan */
.ld-flow{margin-top:40px}
.ld-flow strong{display:block;font:600 1.3rem/1.05 var(--d);text-transform:uppercase;color:var(--ink);margin-bottom:6px}

/* fill: parts mosaic */
.ld-mosaic{display:grid;grid-template-columns:3fr 2fr;grid-template-rows:1fr 1fr;gap:10px;height:clamp(420px,44vw,600px)}
.ld-mosaic figure{margin:0;position:relative;overflow:hidden;background:#fff}
.ld-mosaic .a{grid-row:1/3}
.ld-mosaic img{width:100%;height:100%;object-fit:cover}
.ld-mosaic .contain img{object-fit:contain;padding:10px}
.ld-mosaic figcaption{position:absolute;left:10px;bottom:10px;font-size:.78rem;color:var(--white);background:rgba(43,48,52,.75);padding:3px 8px}
.ld-ticks{margin-top:26px}
.ld-ticks strong{color:var(--white)}

/* limits */
.ld-ledger{margin-top:28px}
.ld-ledger div{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:8px 32px;padding:22px 0}
.ld-ledger dt{font-size:clamp(1.3rem,1.8vw,1.6rem)}

/* handover line */
.ld-hand{list-style:none;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;margin-top:8px}
.ld-hand li{position:relative;padding:30px 16px 0 0}
.ld-hand li::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--asphalt-3)}
.ld-hand li.u::before{background:var(--amber)}
.ld-hand li.y::before{background:var(--haze)}
.ld-hand li.x::before{background:linear-gradient(90deg,var(--amber) 50%,var(--haze) 50%)}
.ld-hand li.x::after{content:"";position:absolute;left:50%;top:-8px;width:3px;height:24px;background:var(--white);transform:translateX(-50%)}
.ld-hand b{display:block;font:600 1.45rem/1.05 var(--d);text-transform:uppercase}
.ld-hand span{display:block;margin-top:6px;font-size:.9rem;color:var(--haze)}
.ld-key{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:28px;font-size:.86rem;color:var(--haze-2)}
.ld-key li{display:flex;align-items:center;gap:8px}
.ld-key i{display:block;width:22px;height:8px;background:var(--asphalt-3)}
.ld-key i.u{background:var(--amber)}
.ld-key i.y{background:var(--haze)}
.ld-pair{margin-top:36px}
.ld-pair p{margin-top:0;padding:20px;background:var(--asphalt-2);max-width:none}
.ld-pair strong{color:var(--white)}
.ld-tiles{margin-top:clamp(48px,6vw,80px)}

#packing .c2-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){
  #packing .c2-cards{grid-template-columns:1fr 1fr}
  .ld-hand{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}
}
@media (max-width:700px){
  .ld-plot>*{--gap:14px;--k:calc((100cqw - var(--gap)) / 388)}
  .ld-floor{flex-wrap:wrap;border-bottom:0;row-gap:22px}
  .ld-box::after{border-bottom:3px solid var(--ink)}
  .ld-mosaic{height:auto;grid-template-rows:220px 160px}
  .ld-mosaic .a{grid-row:auto;grid-column:1/3}
  .ld-ledger div{grid-template-columns:1fr}
  .ld-hand{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  #packing .c2-cards{grid-template-columns:1fr}
}