/* Port pages (/bunkering/<slug>) and the /bunkering hub. Built from partials/port.html and ports/*.json by build.py. */
.port{max-width:52rem;padding-block:clamp(2rem,6vw,4.5rem) 4.5rem}
.crumbs{font-size:.875rem;color:var(--muted);margin-bottom:1.75rem}
.crumbs a{color:var(--sea);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.crumbs a:hover{text-decoration:underline;text-underline-offset:.2em}
.port h1{font-size:clamp(2rem,5vw,3.25rem);font-weight:600;letter-spacing:-.03em;line-height:1.05;margin:.5rem 0 1rem}
.port-lead{font-size:clamp(1.0625rem,2vw,1.25rem);line-height:1.55;color:var(--ink-2);max-width:40rem}
.port-act{margin:1.75rem 0 2.5rem}
.port h2{font-size:1.375rem;font-weight:600;letter-spacing:-.02em;line-height:1.25;margin:3rem 0 .85rem}
.port h3{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;margin:1.5rem 0 .4rem}
.port p,.port li{line-height:1.65}
.port section>p,.port .port-faq p{margin-bottom:1rem;max-width:44rem}
.port ul:not(.port-list):not(.more-list),.port ol{margin:0 0 1rem 1.2rem;padding:0;max-width:44rem}
.port li{margin-bottom:.5rem}
.port section:not(.port-desk) a:not(.btn),.port-src a{color:var(--sea);text-decoration:underline;text-underline-offset:.2em}

.port-photo{margin:0 0 2.5rem}
.port-photo img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);background:var(--line)}
.port-photo figcaption{font-size:.8125rem;color:var(--muted);margin-top:.5rem;line-height:1.5}
.port-photo figcaption a{color:inherit;text-decoration:underline;text-underline-offset:.2em}

.facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0}
@media(min-width:40rem){.facts{grid-template-columns:1fr 1fr}}
.facts div{background:var(--surface);padding:1rem 1.2rem}
.facts dt{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.facts dd{margin:0;font-weight:500;line-height:1.45}

.port-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem 1.5rem 1.75rem;margin-top:3rem}
.port-box h2{margin-top:0}
.port-src{font-size:.875rem;color:var(--muted);margin-top:2.5rem;line-height:1.6}
.port-more{margin-top:2rem}
.port-more h2.label{font-size:.75rem;letter-spacing:.14em;margin:0 0 .25rem}
.port-more ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 1.25rem}
.port-more a{display:inline-flex;align-items:center;min-height:44px;color:var(--sea)}

.port-list{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:1rem}
@media(min-width:40rem){.port-list{grid-template-columns:1fr 1fr}}
.port-list li{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem 1.35rem;margin:0;overflow:hidden}
.port-list img{display:block;width:calc(100% + 2.7rem);max-width:none;height:auto;aspect-ratio:16/9;object-fit:cover;margin:-1.25rem -1.35rem 1rem;background:var(--line)}
.port-list li:hover{border-color:var(--muted)}
.port-list li:focus-within{outline:2px solid var(--sea);outline-offset:3px}
.port-list h2{font-size:1.2rem;margin:.35rem 0 .4rem}
.port-list h2 a{color:inherit;text-decoration:none}
.port-list h2 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.port-list h2 a:focus-visible{outline:none}
.port-list p:not(.label){color:var(--ink-2);font-size:.9375rem;line-height:1.55}

/* The news block, as on the homepage. */
.port-desk{margin-top:3rem}
.port-desk .desk-list{display:grid;gap:1rem;margin-top:1rem}
@media(min-width:48rem){.port-desk .desk-list{grid-template-columns:repeat(3,1fr)}}
.desk-note{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem 1.35rem;display:flex;flex-direction:column;gap:.55rem}
.desk-note:hover{border-color:var(--muted)}
.desk-note h3{font-size:1.05rem;font-weight:600;letter-spacing:-.012em;line-height:1.3;margin:0}
.desk-note h3 a{color:inherit;text-decoration:none}
.desk-note h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.desk-note h3 a:focus-visible{outline:none}
.desk-note:focus-within{outline:2px solid var(--sea);outline-offset:3px}
.desk-note p:not(.label){color:var(--ink-2);font-size:.9375rem;line-height:1.55;margin:0}
.desk-all{display:inline-flex;align-items:center;min-height:44px;margin-top:.75rem;color:var(--sea)}