.ports-section {padding-block:clamp(46px,6vw,92px) 0;color:var(--in-text,#f4f5e8)}
.ports-section h2 {max-width:28ch;margin-bottom:12px;font-size:clamp(1.85rem,3.1vw,2.95rem)}
.ports-deck {max-width:74ch;margin:.55rem 0 clamp(20px,2.5vw,34px);color:var(--in-muted,#d2e0d1);line-height:1.7}
.ports-layout {display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:clamp(22px,3.7vw,58px);align-items:center}
.ports-figure {position:relative;isolation:isolate;overflow:hidden;margin:0;justify-self:start;width:100%;max-width:535px;border:1px solid #728476;border-radius:clamp(20px,3vw,40px) 8px clamp(20px,3vw,40px) 8px;background:#18332d;box-shadow:0 12px 28px #051a1738,inset 0 1px #c1d9be19}
.ports-map-stage {position:relative;isolation:isolate;background:radial-gradient(ellipse at 23% 0%,#345044 0%,#263e34 44%,#18332e 81%);aspect-ratio:535/452}
.ports-map {display:block;width:100%;height:auto;margin:auto}
.ports-map-labels {position:absolute;inset:0;pointer-events:none}
.ports-map-label {position:absolute;transform:translateY(-50%);display:block;white-space:nowrap;max-width:48%;padding:3px 7px;color:#fff5db;background:#233e36f2;border:1px solid #c1cda470;border-radius:2px 7px 7px 2px;box-shadow:0 2px 6px #0b25283d;font:650 clamp(.7rem,.86vw,.86rem)/1.22 var(--body,system-ui,sans-serif)}
.ports-map-label--beilun {border-inline-start:2px solid #f6ce85}
.ports-map-label--yangshan {border-inline-start:2px dashed #bdded1}
.ports-map-label--origin {border-inline-start:2px solid #f3ead1}
.ports-figure figcaption {display:grid;gap:.15rem;padding:.68rem clamp(15px,2.5vw,25px) .8rem;border-top:1px solid #6b897064;background:#17332d;color:#dce8da;font-size:.88rem;line-height:1.45}
.ports-figure figcaption span {font-weight:650}
.ports-figure figcaption small {font-size:.76rem;color:#bfcdc1}
.ports-summary {min-width:0;border-inline-start:2px solid #74856a;padding:clamp(14px,2.2vw,30px);background:linear-gradient(100deg,rgb(14 39 28 / .88),rgb(14 39 28 / .72));border-radius:0 18px 18px 0}
.ports-origin {display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .8rem;margin:0 0 .8rem;color:var(--in-muted,#d2e0d1);font-size:.92rem}
.ports-origin b {font-size:.8rem;letter-spacing:.06em;color:var(--in-accent,#edd099)}
.ports-stops {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));list-style:none;padding:0;margin:0;gap:clamp(16px,2vw,32px)}
.ports-stops li {min-width:0;padding-block:16px;border-block-start:2px solid #f4d093}
.ports-stops li:nth-child(2) {border-block-start:2px dashed #b9dbca}
.ports-stop-heading {display:flex;align-items:baseline;gap:8px}
.ports-index {font:italic 600 .9rem/1 var(--serif,Georgia,serif);color:var(--in-accent,#edd099);white-space:nowrap}
.ports-stop-heading h3 {margin:0;font-size:clamp(1.05rem,1.6vw,1.4rem);line-height:1.3;color:var(--in-text,#f4f5e8)}
.ports-terminal,.ports-note {color:var(--in-muted,#d2e0d1);line-height:1.6}
.ports-terminal {margin:.5rem 0 0;font-size:.94rem}
.ports-distance {display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .35rem;margin:.35rem 0 .3rem;color:var(--in-text,#f4f5e8);line-height:1.1}
.ports-distance strong {color:#f4d093;font-size:clamp(2.3rem,3.7vw,3.7rem);font-weight:600;font-family:var(--serif,Georgia,serif);letter-spacing:-.04em}
.ports-stops li:nth-child(2) .ports-distance strong,.ports-stops li:nth-child(2) .ports-index {color:#b9dbca}
.ports-distance span {font-size:.82rem}
.ports-section a {text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;color:#f0d9a8}
.ports-stops a {display:inline-block;padding-block:7px;font-size:.88rem}
.ports-section a:hover,.ports-section summary:hover {color:#fff7d9}
.ports-section a:focus-visible,.ports-section summary:focus-visible {outline:2px solid #f4d093;outline-offset:3px}
.ports-note {margin:.55rem 0 0;padding:1rem 0 0;border-top:1px solid var(--in-line,#617461);font-size:.86rem}
.ports-sources {margin-top:17px;color:var(--in-muted,#d2e0d1);font-size:.83rem}
.ports-sources summary {cursor:pointer;width:fit-content;max-width:100%;padding-block:8px;font-weight:600;line-height:1.5}
.ports-planning {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 24px;margin-top:20px;padding:15px clamp(14px,2.4vw,30px);background:var(--in-card);border-inline-start:2px solid var(--in-accent)}
.ports-planning p {flex:1 1 520px;margin:0;color:var(--in-muted);line-height:1.65}
.ports-planning a {display:inline-flex;align-items:center;min-height:44px}
.ports-sources div {border-inline-start:1px solid var(--in-line,#617461);padding-inline-start:12px;overflow-wrap:anywhere}
.ports-sources p {margin:5px 0;line-height:1.6}
@media(max-width:1000px) and (min-width:761px){.ports-layout {grid-template-columns:minmax(0,1fr) minmax(0,.96fr)}.ports-stops {grid-template-columns:1fr;gap:0}.ports-stops li {padding-block:9px}.ports-distance {margin:0}.ports-distance strong {font-size:2.1rem}.ports-terminal{margin:.15rem 0}}
@media(max-width:760px){.ports-layout{grid-template-columns:1fr}.ports-figure{max-width:440px;justify-self:center}.ports-stops {gap:18px}.ports-distance strong {font-size:2.6rem}}
@media(max-width:400px){.ports-map-label{padding:2px 4px}.ports-map .ports-scale-mark{font-size:17px}.ports-map .ports-bay-mark{font-size:17px}}
@media(max-width:400px){.ports-stops {grid-template-columns:1fr;gap:0}.ports-stops li {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;padding-block:10px}.ports-stop-heading,.ports-terminal {grid-column:1}.ports-terminal {margin:0}.ports-distance {grid-column:2;grid-row:1 / span 2;align-content:center;justify-content:flex-end;max-width:8rem}.ports-distance strong {font-size:2.2rem}.ports-stops a{grid-column:1 / -1;width:fit-content}}