/* The Jawi accent is one word, so its face is subset to those six letters. */
@import url("https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@500&text=%D8%B4%D9%87%D8%A8%D9%86%D8%AF%D8%B1&display=swap");

/* ---------- Shahbandar: Southeast Asia and the Indian Ocean ----------
   Monsoon blue-gray for the sea, cream paper inked in teak for the charter, saffron and deep jade for the two monsoons. */
body[data-platform="shahbandar"] {
  --sea: #1E2B35; --sea-deep: #15202A; --sea-raise: #283A47;
  --sea-ink: #EFE7D6; --sea-ink-2: #B6C0C5; --sea-ink-3: #93A1A9; --sea-rule: rgba(239, 231, 214, .14);
  --wind-1: #E9A93A; --wind-2: #55B394; --wind-3: #C47A3E; --gold-ink: #F0B54E; --teal-ink-sea: #86D2B6;
  --vellum: #EFE6D3; --vellum-2: #E6DAC1; --vellum-3: #D9CAA9;
  --ink: #2A2018; --ink-2: #55473A; --ink-3: #6B5C4E; --gilt: #8A5212; --teal-ink: #1D6B55; --wax: #9A3A24;
  --rule: rgba(42, 32, 24, .18); --rule-strong: rgba(42, 32, 24, .52);
  --plate-dark: #172430; --plate-light: #F1E3C4;
  --display: "Taviraj", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --body: "Plus Jakarta Sans", "DM Sans", "Segoe UI", system-ui, sans-serif;
  --jawi: "Noto Naskh Arabic", "Scheherazade New", serif;
  background: var(--sea);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-platform="shahbandar"] { --vellum: #151C23; --vellum-2: #1B242C; --vellum-3: #25313B; --ink: #EEE6D5; --ink-2: #BEB6A6; --ink-3: #9E978A; --gilt: #EBB14A; --teal-ink: #7FCFB0; --wax: #DE7D57; --rule: rgba(238, 230, 213, .16); --rule-strong: rgba(238, 230, 213, .5); --plate-light: #E2D3B3; }
}
:root[data-theme="dark"] body[data-platform="shahbandar"] { --vellum: #151C23; --vellum-2: #1B242C; --vellum-3: #25313B; --ink: #EEE6D5; --ink-2: #BEB6A6; --ink-3: #9E978A; --gilt: #EBB14A; --teal-ink: #7FCFB0; --wax: #DE7D57; --rule: rgba(238, 230, 213, .16); --rule-strong: rgba(238, 230, 213, .5); --plate-light: #E2D3B3; }

/* Type: Taviraj for headings, Plus Jakarta Sans for reading */
body[data-platform="shahbandar"] { font-size: 17.5px; }
body[data-platform="shahbandar"] .motto { font-style: normal; font-weight: 500; letter-spacing: -.015em; }
body[data-platform="shahbandar"] h1, body[data-platform="shahbandar"] h2, body[data-platform="shahbandar"] h3 { font-weight: 500; letter-spacing: -.014em; }
body[data-platform="shahbandar"] h2 { line-height: 1.06; }
body[data-platform="shahbandar"] h3 { line-height: 1.15; }
body[data-platform="shahbandar"] .statement { font-weight: 400; letter-spacing: -.016em; line-height: 1.14; }
body[data-platform="shahbandar"] .hero-sub .cartouche h1 { font-size: clamp(2.4rem, 5vw, 4.25rem); max-width: 12ch; line-height: 1.04; }
body[data-platform="shahbandar"] .prose strong { font-weight: 600; }
body[data-platform="shahbandar"] .btn { font-weight: 600; }

/* The hero canvas: the monsoon over the strait */
.hero canvas.shahbandar-hero { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }

/* Each sea band carries a lozenge lattice after the structure of archipelago songket */
body[data-platform="shahbandar"] .band.sea::before { transform: none; opacity: .085; background: url(../img/shahbandar-songket.svg) 0 0 / 60px 60px repeat;
  -webkit-mask-image: radial-gradient(72% 95% at 90% 45%, #000, transparent 72%); mask-image: radial-gradient(72% 95% at 90% 45%, #000, transparent 72%); }
body[data-platform="shahbandar"] .plate-frame img { filter: grayscale(1) contrast(1.1) brightness(1.03); }
/* The Gujarat cloth is dyed dark red and indigo: lift it so its pattern reads in the plate's two tones */
body[data-platform="shahbandar"] .plate:not(.developed) .plate-frame img[src*="shahbandar-cloth"] { filter: grayscale(1) brightness(1.4) contrast(.92); }
@media (hover: hover) { body[data-platform="shahbandar"] .plate.can-develop:hover .plate-frame img[src*="shahbandar-cloth"] { filter: none; } }

/* ---------- I. Melaka: the crossroads ---------- */
.sb-cross { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
@media (max-width: 900px) { .sb-cross { grid-template-columns: minmax(0, 1fr); } }
.sb-manifest { margin: 0; display: grid; gap: 14px; align-content: start; padding-top: 6px; }
.sb-manifest .station-date { color: var(--gilt); }
.sb-manifest .station-date small { max-width: 22ch; line-height: 1.35; }
.sb-places-lab { font: italic 1.02rem/1.4 var(--chart); color: var(--ink-2); border-top: 1px solid var(--rule-strong); padding-top: 14px; margin-top: 4px; }
.sb-places { list-style: none; margin: 0; padding: 0; columns: 3 7.5em; column-gap: 18px; font: .86rem/1.55 var(--body); color: var(--ink-3); }
.sb-places li { break-inside: avoid; }
.sb-places li.k { color: var(--ink); font-weight: 500; }
@media (max-width: 900px) {
  .sb-manifest { grid-template-columns: auto minmax(0, 1fr); column-gap: 22px; align-items: start; }
  .sb-manifest .station-date { grid-row: span 2; }
  .sb-places { columns: 2 7em; }
}
@media (max-width: 520px) {
  .sb-manifest { grid-template-columns: minmax(0, 1fr); }
  .sb-manifest .station-date { grid-row: auto; }
  .sb-places { columns: 3 6em; font-size: .82rem; }
}

/* ---------- II. The shahbandar ---------- */
.sb-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px clamp(28px, 4vw, 56px); align-items: end; margin-bottom: clamp(32px, 4.5vw, 56px); }
.sb-intro h2 { max-width: 15ch; }
.sb-jawi { margin: 0; display: grid; justify-items: center; gap: 6px; padding: 6px 22px 12px; border-left: 1px solid color-mix(in srgb, var(--gold-ink) 40%, transparent); }
.sb-jawi .jw { font: 500 clamp(3.4rem, 7vw, 5.2rem)/1.25 var(--jawi); color: var(--gold-ink); }
.sb-jawi figcaption { font: italic 1rem/1.3 var(--chart); color: var(--sea-ink-2); text-align: center; }
.sb-jawi figcaption i { color: var(--sea-ink); }
@media (max-width: 760px) {
  .sb-intro { grid-template-columns: minmax(0, 1fr); }
  .sb-jawi { justify-items: start; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--gold-ink) 40%, transparent); padding: 14px 0 0; }
  .sb-jawi figcaption { text-align: left; }
}

/* The monsoon and the four harbor masters */
.sb-mon { margin: clamp(40px, 6vw, 72px) 0 0; display: grid; gap: 18px; }
.sb-mon-head { display: grid; gap: 6px; max-width: 62ch; }
.sb-mon-title { font: 500 1.45rem/1.2 var(--display); color: var(--sea-ink); }
.sb-mon-intro { color: var(--sea-ink-2); font-size: .98rem; }
.sb-mon-map { position: relative; border: 1px solid var(--sea-rule); background: color-mix(in srgb, var(--sea-deep) 70%, var(--sea)); }
.sb-mon-map svg { width: 100%; height: auto; display: block; }
.sb-mon-map .grat { fill: none; stroke: var(--sea-rule); stroke-width: .6; }
.sb-mon-map .land { fill: color-mix(in srgb, var(--sea-raise) 82%, var(--sea)); stroke: color-mix(in srgb, var(--sea-ink) 26%, transparent); stroke-width: .55; stroke-linejoin: round; }
.sb-mon-map .w { transition: transform 1s cubic-bezier(.45, .05, .25, 1), opacity .8s; }
.sb-mon-map .w path { fill: none; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: stroke .8s; }
.sb-mon-map .w.ne path { stroke: var(--wind-1); }
.sb-mon-map .w.sw path { stroke: var(--wind-2); }
.sb-mon-map .w.var path { stroke: color-mix(in srgb, var(--sea-ink) 55%, transparent); }
.sb-mon-map .winds { opacity: .78; }
.sb-mon-map .r-base { fill: none; stroke: color-mix(in srgb, var(--sea-ink) 30%, transparent); stroke-width: 1.1; stroke-dasharray: 1.2 4.2; stroke-linecap: round; }
.sb-mon-map .r-base.cont { stroke-dasharray: 1 6; }
.sb-mon-map .r-sel { fill: none; stroke: color-mix(in srgb, var(--gold-ink) 55%, transparent); stroke-width: 1.6; stroke-dasharray: 2 5; stroke-linecap: round; opacity: 0; transition: opacity .4s; }
.sb-mon-map .r-sel.on { opacity: 1; }
.sb-mon-map .r-on { fill: none; stroke: var(--sea-ink); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 8 7; opacity: 0; transition: opacity .45s; }
.sb-mon-map .r-on.on { opacity: .95; animation: sbflow 1.5s linear infinite; }
.sb-mon-map .r-on.in { animation-direction: reverse; }
.sb-mon-map .r-on.on.is-sel { stroke: var(--gold-ink); stroke-width: 3; }
@keyframes sbflow { to { stroke-dashoffset: -30; } }
.sb-mon-map .r-hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; pointer-events: stroke; }
.sb-mon-map .port circle { fill: var(--sea); stroke: var(--sea-ink-2); stroke-width: 1.3; transition: fill .35s, stroke .35s; }
.sb-mon-map .port text { font: italic 15px var(--chart); fill: var(--sea-ink-2); paint-order: stroke; stroke: var(--sea-deep); stroke-width: 4px; stroke-linejoin: round; transition: fill .35s; cursor: pointer; }
.sb-mon-map .port.live circle { fill: var(--sea-ink); stroke: var(--sea-ink); }
.sb-mon-map .port.live text { fill: var(--sea-ink); }
.sb-mon-map .port.sel circle { fill: var(--gold-ink); stroke: var(--gold-ink); }
.sb-mon-map .port.sel text { fill: var(--gold-ink); }
.sb-mon-map .port.minor circle { r: 2.6; }
.sb-mon-map .melaka .halo { fill: none; stroke: var(--gold-ink); stroke-width: 1; opacity: .55; }
.sb-mon-map .melaka .core { fill: var(--gold-ink); }
.sb-mon-map .melaka text { font: 19px var(--chart-sc); fill: var(--gold-ink); letter-spacing: .04em; paint-order: stroke; stroke: var(--sea-deep); stroke-width: 5px; stroke-linejoin: round; }
.sb-mon-map .sea-lab { font: italic 16px var(--chart); fill: color-mix(in srgb, var(--teal-ink-sea) 70%, transparent); letter-spacing: .05em; }
.sb-mon-map .sea-lab.small { font-size: 13px; }
.sb-stamp { position: absolute; left: 2.2%; bottom: 5%; display: grid; gap: 2px; pointer-events: none; }
.sb-stamp .mo { font: clamp(2.2rem, 4.6vw, 3.8rem)/.95 var(--chart); color: var(--gold-ink); }
.sb-stamp .se { font: italic 1.05rem/1.25 var(--chart); color: var(--sea-ink-2); }
.sb-stamp .se b { font-style: normal; font-weight: 400; display: inline-block; width: 22px; height: 2px; margin: 0 8px 4px 0; vertical-align: middle; background: var(--sea-ink-3); }
.sb-stamp .se.ne b { background: var(--wind-1); }
.sb-stamp .se.sw b { background: var(--wind-2); }

.sb-mon-ctl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.sb-mon-ctl .acc-scale { padding-bottom: 22px; }
.sb-mon-ctl .acc-ticks span { font-size: .8rem; }
.sb-mon-ctl .acc-ticks b { font-weight: 400; }
.sb-mon-ctl .acc-ticks .s { display: none; }
.sb-mon-say { min-height: 3.1em; font: italic 1.06rem/1.45 var(--chart); color: var(--sea-ink-2); max-width: 70ch; }
.sb-mon-say b { font: normal 400 1rem var(--chart-sc); color: var(--gold-ink); margin-right: 8px; }

.sb-mon-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(26px, 4vw, 52px); align-items: start; margin-top: 10px; }
.sb-lab { font: italic 1.05rem/1.3 var(--chart); color: var(--sea-ink-2); margin-bottom: 10px; }
.sb-fleets ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sea-rule); }
.sb-fleets li { border-bottom: 1px solid var(--sea-rule); }
.sb-fleet { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; width: 100%; padding: 12px 4px; cursor: pointer; }
.sb-fleet:focus-visible { outline: 2px solid var(--teal-ink-sea); outline-offset: 2px; }
.sb-fleet .dot { width: 9px; height: 9px; border-radius: 50%; border: 1.3px solid var(--sea-ink-3); align-self: center; transition: background-color .35s, border-color .35s; }
.sb-fleet .nm { font: 500 1.16rem/1.2 var(--display); color: var(--sea-ink-2); transition: color .25s; }
.sb-fleet .st { font: italic .95rem/1.2 var(--chart); color: var(--sea-ink-3); text-align: right; }
.sb-fleet.live .dot { background: var(--sea-ink); border-color: var(--sea-ink); }
.sb-fleet.live .nm { color: var(--sea-ink); }
.sb-fleet.live .st { color: var(--sea-ink-2); }
.sb-fleet.port .dot { border-color: var(--sea-ink-2); background: color-mix(in srgb, var(--sea-ink) 30%, transparent); }
.sb-fleet[aria-pressed="true"] .nm { color: var(--gold-ink); }
.sb-fleet[aria-pressed="true"] .dot { border-color: var(--gold-ink); }
.sb-fleet[aria-pressed="true"].live .dot { background: var(--gold-ink); }

.sb-masters { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sb-masters li { border: 1px solid var(--sea-rule); padding: 10px 10px 12px; display: grid; gap: 5px; align-content: start; transition: border-color .35s, background-color .35s; }
.sb-masters .mn { font: 1.15rem/1 var(--chart-sc); color: var(--sea-ink-3); transition: color .35s; }
.sb-masters .mw { font-size: .78rem; line-height: 1.38; color: var(--sea-ink-3); transition: color .35s; }
.sb-masters li.on { border-color: color-mix(in srgb, var(--gold-ink) 70%, transparent); background: color-mix(in srgb, var(--gold-ink) 7%, transparent); }
.sb-masters li.on .mn { color: var(--gold-ink); }
.sb-masters li.on .mw { color: var(--sea-ink); }
.sb-detail { display: grid; gap: 10px; min-height: 12em; }
.sb-detail .d-head { font: 500 1.5rem/1.15 var(--display); color: var(--sea-ink); }
.sb-detail .d-who { font: italic 1.08rem/1.35 var(--chart); color: var(--gold-ink); }
.sb-detail p { color: var(--sea-ink-2); font-size: .98rem; }
.sb-detail .d-dues { border-top: 1px solid var(--sea-rule); padding-top: 10px; }
.sb-detail .d-dues b { font-weight: 600; color: var(--sea-ink); }
.sb-mon-note { font-size: .84rem; line-height: 1.5; color: var(--sea-ink-3); max-width: 78ch; }
.sb-mon-note a { color: inherit; }

@media (max-width: 900px) { .sb-mon-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .sb-mon-map .port text { font-size: 28px; stroke-width: 7px; }
  .sb-mon-map .melaka text { font-size: 32px; stroke-width: 8px; }
  .sb-mon-map .sea-lab { font-size: 25px; }
  .sb-mon-map .minor { display: none; }
  .sb-mon-map .w path { stroke-width: 1.2; }
  .sb-stamp { position: static; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
  .sb-mon-ctl { grid-template-columns: minmax(0, 1fr); }
  .sb-mon-ctl .small-btn { justify-self: start; }
}
@media (max-width: 520px) {
  .sb-masters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sb-mon-ctl .acc-ticks span { font-size: .78rem; }
  .sb-mon-ctl .acc-ticks .l { display: none; }
  .sb-mon-ctl .acc-ticks .s { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-mon-map .r-on.on { animation: none; }
  .sb-mon-map .w { transition: none; }
}

/* ---------- III. The open port ---------- */
.sb-laws { margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.sb-laws > * { min-width: 0; }
.sb-laws .charter-panel h3 { font-size: 1.45rem; margin-bottom: 4px; }
.sb-laws .clause { display: grid; grid-template-columns: 2.1em minmax(0, 1fr); gap: 6px; }
.sb-laws .clause span { margin: 0; }
.sb-laws .clause small { display: block; font: .78rem/1.4 var(--body); color: var(--ink-3); margin-top: 3px; font-style: normal; }
.sb-port-terms .register .what { font-size: .94rem; color: var(--ink-2); }
.sb-port-terms .q-head, .sb-detail .d-head, .sb-mon-title { text-wrap: balance; }
@media (max-width: 900px) { .sb-laws { grid-template-columns: minmax(0, 1fr); } }

/* ---------- IV. The modern shahbandar ---------- */
body[data-platform="shahbandar"] .station-date small { max-width: 26ch; }
.sb-now .station-text.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 820px) { .sb-now .station-text.two { grid-template-columns: minmax(0, 1fr); } }
.sb-asks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3.5vw, 44px); }
.sb-asks li { border-top: 1px solid var(--sea-rule); padding: 14px 0 16px; display: grid; gap: 4px; align-content: start; }
.sb-asks .q { font: italic 1.12rem/1.3 var(--chart); color: var(--gold-ink); }
.sb-asks .a { color: var(--sea-ink-2); font-size: .98rem; }
@media (max-width: 760px) { .sb-asks { grid-template-columns: minmax(0, 1fr); } }

/* ---------- V. Partnership ---------- */
/* Keep each entry's text under its heading when its neighbor in the row runs longer */
body[data-platform="shahbandar"] .entry { align-content: start; }