/* ---------- Shreni: India and the Indian diaspora ----------
   Indigo for the chart, ivory and sandstone for the charter, vermilion and ochre as the printer's second and third
   colors. Eczar (Vaibhav Singh) carries the headings and the one word in Devanagari; Hind (Indian Type Foundry)
   carries the text. */
body[data-platform="shreni"] {
  --sea: #16223F; --sea-deep: #0F182F; --sea-raise: #1F2C51;
  --sea-ink: #F4EDE0; --sea-ink-2: #BCC2D6; --sea-ink-3: #97A0BD; --sea-rule: rgba(244, 237, 224, .14);
  --wind-1: #D9A24C; --wind-2: #EADFCB; --wind-3: #E2583B; --gold-ink: #E3B262; --teal-ink-sea: #A9C1EC;
  --vellum: #F3ECDF; --vellum-2: #EADFCB; --vellum-3: #DDCBAA;
  --ink: #1D1A28; --ink-2: #4A4456; --ink-3: #5E5868; --gilt: #855410; --teal-ink: #2C3A86; --wax: #A8331D;
  --rule: rgba(29, 26, 40, .18); --rule-strong: rgba(29, 26, 40, .52);
  --plate-dark: #18213F; --plate-light: #F2E0C2;
  --display: "Eczar", "Iowan Old Style", Georgia, serif;
  --body: "Hind", "DM Sans", system-ui, sans-serif;
  /* the printer's colors, read by the hero canvas and the legend */
  --sh-indigo: #7088D8; --sh-indigo-rgb: 112, 136, 216;
  --sh-verm: #E2583B; --sh-verm-rgb: 226, 88, 59;
  --sh-ochre: #D9A24C; --sh-ochre-rgb: 217, 162, 76;
  --sh-ivory-rgb: 244, 237, 224;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-platform="shreni"] { --vellum: #1C1619; --vellum-2: #241C20; --vellum-3: #33282B; --ink: #F1E9DA; --ink-2: #C9BFB0; --ink-3: #A99F92; --gilt: #E3B262; --teal-ink: #A9B9EE; --wax: #EE7A5C; --rule: rgba(241, 233, 218, .16); --rule-strong: rgba(241, 233, 218, .5); --plate-light: #E9D6B5; }
}
:root[data-theme="dark"] body[data-platform="shreni"] { --vellum: #1C1619; --vellum-2: #241C20; --vellum-3: #33282B; --ink: #F1E9DA; --ink-2: #C9BFB0; --ink-3: #A99F92; --gilt: #E3B262; --teal-ink: #A9B9EE; --wax: #EE7A5C; --rule: rgba(241, 233, 218, .16); --rule-strong: rgba(241, 233, 218, .5); --plate-light: #E9D6B5; }

/* Type */
body[data-platform="shreni"] { font-weight: 400; }
body[data-platform="shreni"] .motto { font-style: normal; font-weight: 400; letter-spacing: -.012em; }
body[data-platform="shreni"] h1, body[data-platform="shreni"] h2 { font-weight: 400; letter-spacing: -.012em; line-height: 1.04; }
body[data-platform="shreni"] h3 { font-weight: 500; letter-spacing: -.005em; }
body[data-platform="shreni"] .statement { font-weight: 400; letter-spacing: -.012em; }
body[data-platform="shreni"] .prose strong { font-weight: 500; }
body[data-platform="shreni"] .hero-sub .cartouche h1 { font-size: clamp(2.35rem, 5vw, 4.25rem); max-width: 15ch; }
body[data-platform="shreni"] .cartouche h1 .sh-l2 { display: block; }

/* Hero: the block printer's canvas, and a cartouche cut for indigo */
.hero canvas.shreni-hero { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
body[data-platform="shreni"] .cartouche { background: linear-gradient(180deg, rgba(13, 19, 39, .82), rgba(13, 19, 39, .7)); border-color: rgba(227, 178, 98, .55); outline-color: rgba(227, 178, 98, .2); }
body[data-platform="shreni"] .hero .plate .plate-frame { outline-color: rgba(227, 178, 98, .35); }
body[data-platform="shreni"] .legend i { height: 3px; }

/* Plates print as indigo and sandstone */
body[data-platform="shreni"] .plate-frame img { filter: grayscale(1) contrast(1.1) brightness(1.04); }
/* the aerial of GIFT City is hazy: print it with more contrast, until the reader asks for its colors */
body[data-platform="shreni"] .plate:not(.developed) .plate-frame img[src*="shreni-gift"] { filter: grayscale(1) contrast(1.45) brightness(.97); }
@media (hover: hover) { body[data-platform="shreni"] .plate.can-develop:hover .plate-frame img[src*="shreni-gift"] { filter: none; } }
body[data-platform="shreni"] .entries .entry { align-content: start; }
body[data-platform="shreni"] .station-text.two { align-items: start; }
@media (min-width: 821px) { .station-text.two.sh-gift-text { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }

/* Each sea band carries the printed lattice */
body[data-platform="shreni"] .band.sea::before { transform: none; opacity: .085; background: url(../img/shreni-jaal.svg) 0 0 / 56px 56px repeat;
  -webkit-mask-image: radial-gradient(70% 95% at 90% 45%, #000, transparent 72%); mask-image: radial-gradient(70% 95% at 90% 45%, #000, transparent 72%); }

/* ---------- I. The shreni ---------- */
.sh-open { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 56px); align-items: center; margin-bottom: clamp(32px, 4.5vw, 56px); }
.sh-open h2 { max-width: 17ch; }
/* the word, framed like the border of a printed cloth */
.sh-word { margin: 0; display: grid; justify-items: center; gap: 12px; width: clamp(220px, 22vw, 290px); padding: 40px 20px 34px;
  border: 1px solid var(--rule-strong); outline: 1px solid var(--rule); outline-offset: 5px;
  background: url(../img/shreni-border.svg) 0 8px / 24px 12px round no-repeat, url(../img/shreni-border.svg) 0 calc(100% - 8px) / 24px 12px round no-repeat,
    color-mix(in srgb, var(--vellum-2) 55%, transparent); }
.sh-dev { font-family: "Eczar", var(--display); font-weight: 500; font-size: clamp(3.4rem, 6vw, 4.6rem); line-height: 1.15; color: var(--wax); }
.sh-word figcaption { font: italic 1rem/1.35 var(--chart); color: var(--ink-2); text-align: center; max-width: 24ch; }
.sh-word figcaption i { color: var(--ink); }
.sh-clauses { gap: 12px; }
.sh-clauses .sh-panel-h { font: 1.05rem var(--chart-sc); color: var(--wax); letter-spacing: .03em; padding-bottom: 8px; border-bottom: 1px solid var(--rule-strong); }
.sh-clauses .clause { display: grid; grid-template-columns: 2.1em minmax(0, 1fr); align-items: baseline; }
.sh-clauses .clause span { margin: 0; }
.sh-clauses .sh-panel-foot { font-size: .82rem; color: var(--ink-3); padding-top: 8px; border-top: 1px solid var(--rule); }
.sh-stone { margin-top: clamp(52px, 7vw, 92px); }
/* on a narrow screen the charter follows the sentence that introduces it */
@media (max-width: 900px) {
  .sh-law-text { display: contents; }
  .sh-law-a { order: 1; } .sh-clauses { order: 2; } .sh-law-b { order: 3; } .sh-law-text > .sources { order: 4; margin-top: -8px; }
}
@media (max-width: 760px) {
  .sh-open { grid-template-columns: minmax(0, 1fr); }
  .sh-word { justify-self: start; width: min(300px, 100%); }
}

/* ---------- II. The endowment ---------- */
.sh-endow { margin: clamp(48px, 7vw, 88px) 0 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 4vw, 52px); align-items: start;
  border-top: 1px solid var(--sea-rule); padding-top: clamp(26px, 4vw, 40px); }
.sh-endow > * { min-width: 0; }
.se-left { display: grid; gap: 18px; }
.se-fig svg { width: 100%; height: auto; display: block; overflow: visible; }
.se-cap { margin-top: 0; max-width: 70ch; }
.sea .sh-endow .q-head { color: var(--sea-ink); }
.sea .sh-endow .q-ctl { border-bottom-color: var(--sea-rule); }
.sea .sh-endow .q-lab { color: var(--sea-ink-2); }
.sea .sh-endow .q-result { color: var(--gold-ink); font-family: var(--display); }
.sea .sh-endow .q-split dt { color: var(--sea-ink-2); }
.sea .sh-endow .q-split dd { color: var(--sea-ink); }
.sea .sh-endow .q-note { color: var(--sea-ink-2); min-height: 4.8em; }
.sh-endow .seg { justify-self: start; flex-wrap: wrap; }
.sh-endow .q-ctl > span:last-child:has(.small-btn) { justify-self: start; }
.sh-endow [data-run][aria-pressed="true"] { border-color: var(--gold-ink); color: var(--gold-ink); }
/* figure inks */
.se-fig .coin { fill: var(--gold-ink); stroke: color-mix(in srgb, var(--sea) 55%, var(--gold-ink)); stroke-width: 1; transition: opacity .35s ease; }
.se-fig .coin.b { fill: color-mix(in srgb, var(--wind-3) 82%, var(--sea-ink)); stroke: color-mix(in srgb, var(--sea) 55%, var(--wind-3)); }
.se-fig .coin.gone { opacity: .08; }
.se-fig .shelf { stroke: color-mix(in srgb, var(--sea-ink) 40%, transparent); stroke-width: 1.2; }
.se-fig .st-num { font: 400 28px var(--display); fill: var(--sea-ink); font-variant-numeric: tabular-nums; }
.se-fig .st-lab { font: 14px var(--body); fill: var(--sea-ink-2); }
.se-fig .gr-h { font: italic 16.5px var(--chart); fill: var(--sea-ink-2); }
.se-fig .gr-n { font: 12.5px var(--body); fill: var(--sea-ink-3); font-variant-numeric: lining-nums tabular-nums; }
.se-fig .cell-bg { fill: none; stroke: color-mix(in srgb, var(--sea-ink) 20%, transparent); stroke-width: 1; }
.se-fig .cell-a { fill: var(--gold-ink); transition: opacity .25s ease; }
.se-fig .cell-b { fill: color-mix(in srgb, var(--wind-3) 82%, var(--sea-ink)); transition: opacity .25s ease; }
.se-fig .mark { fill: none; stroke: var(--sea-ink); stroke-width: 1.6; opacity: 0; transition: opacity .3s ease; }
.se-fig .mark.on { opacity: 1; }
.se-fig .key-a { fill: var(--gold-ink); } .se-fig .key-b { fill: color-mix(in srgb, var(--wind-3) 82%, var(--sea-ink)); }
.se-fig .key-t { font: 14px var(--body); fill: var(--sea-ink-2); }
.se-fig.narrow .st-num { font-size: 26px; } .se-fig.narrow .gr-h { font-size: 16px; } .se-fig.narrow .gr-n { font-size: 12px; }
.sh-after { margin-top: clamp(40px, 6vw, 64px); }
@media (max-width: 960px) {
  .sh-endow { grid-template-columns: minmax(0, 1fr); }
  /* on a narrow screen: the chart, then its controls, then the note on the numbers */
  .se-left { display: contents; }
  .se-fig { order: 1; } .se-ctl { order: 2; } .se-cap { order: 3; }
}

/* ---------- III. Across the seas ---------- */
.sh-sea { margin: clamp(36px, 5vw, 60px) 0 0; display: grid; gap: clamp(20px, 3vw, 32px); }
.ss-map { position: relative; }
.ss-map svg { width: 100%; height: auto; display: block; }
.ss-map .ocean { fill: color-mix(in srgb, var(--teal-ink) 8%, var(--vellum)); }
.ss-map .grat { fill: none; stroke: color-mix(in srgb, var(--teal-ink) 18%, transparent); stroke-width: .6; }
.ss-map .land { fill: color-mix(in srgb, var(--gilt) 16%, var(--vellum-2)); stroke: color-mix(in srgb, var(--ink) 50%, transparent); stroke-width: .7; stroke-linejoin: round; }
.ss-map .frame { fill: none; stroke: var(--rule-strong); stroke-width: 1; }
.ss-map .sea-lab { font: italic 17px var(--chart); fill: color-mix(in srgb, var(--teal-ink) 75%, transparent); letter-spacing: .06em; text-anchor: middle; }
.ss-map .site { cursor: pointer; }
.ss-map .site .ring { fill: none; stroke: var(--wax); stroke-width: 1.4; opacity: 0; transition: opacity .3s, r .3s; }
.ss-map .site .dot { fill: var(--vellum); stroke: var(--gilt); stroke-width: 2; transition: fill .3s, stroke .3s; }
.ss-map .site.abroad .dot { stroke: var(--wax); }
.ss-map .site text { font: italic 17px var(--chart); fill: var(--ink-2); paint-order: stroke; stroke: color-mix(in srgb, var(--gilt) 16%, var(--vellum-2)); stroke-width: 4px; stroke-linejoin: round; transition: fill .3s; }
.ss-map .site.sea-side text { stroke: color-mix(in srgb, var(--teal-ink) 8%, var(--vellum)); }
.ss-map .site.on .dot { fill: var(--gilt); }
.ss-map .site.abroad.on .dot { fill: var(--wax); }
.ss-map .site.on .ring { opacity: 1; }
.ss-map .site.on text { fill: var(--ink); }
.ss-map .site:hover text { fill: var(--ink); }
.ss-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 52px); align-items: start; }
.ss-groups { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(16px, 2.6vw, 32px); }
.ss-gh { font: 1rem var(--chart-sc); color: var(--gilt); letter-spacing: .03em; padding-bottom: 6px; border-bottom: 1px solid var(--rule-strong); }
.ss-group:last-child .ss-gh { color: var(--wax); }
.ss-list { list-style: none; margin: 0; padding: 0; }
.ss-list li { border-bottom: 1px solid var(--rule); }
.ss-list button { all: unset; box-sizing: border-box; display: grid; gap: 1px; width: 100%; padding: 10px 2px 9px; cursor: pointer; }
.ss-list button:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 2px; }
.ss-n { font: 400 1.18rem/1.2 var(--display); color: var(--ink-2); transition: color .25s; }
.ss-d { font: italic .92rem/1.2 var(--chart); color: var(--ink-3); }
.ss-list button[aria-pressed="true"] .ss-n { color: var(--ink); }
.ss-list button[aria-pressed="true"] .ss-d { color: var(--gilt); }
.ss-group:last-child .ss-list button[aria-pressed="true"] .ss-d { color: var(--wax); }
.ss-list button[aria-pressed="true"] .ss-n::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 9px 3px 0; background: var(--gilt); transform: rotate(45deg); }
.ss-group:last-child .ss-list button[aria-pressed="true"] .ss-n::before { background: var(--wax); }
.ss-read { border-left: 2px solid var(--gilt); padding: 4px 0 4px 20px; display: grid; gap: 8px; min-height: 13em; align-content: start; }
.ss-read.abroad { border-left-color: var(--wax); }
.sr-date { font: italic 1.08rem var(--chart); color: var(--gilt); }
.ss-read.abroad .sr-date { color: var(--wax); }
.sr-name { font: 400 1.6rem/1.15 var(--display); color: var(--ink); }
.sr-text { color: var(--ink-2); max-width: 54ch; }
.ss-read .sr-src { margin-top: 2px; }
@media (max-width: 960px) { .ss-side { grid-template-columns: minmax(0, 1fr); } .ss-read { min-height: 0; } }
@media (max-width: 760px) {
  .ss-map .sea-lab { font-size: 22px; }
  .ss-map .sea-lab.minor { display: none; }
  .ss-map .site text { font-size: 23px; stroke-width: 6px; }
}
@media (max-width: 340px) { .ss-groups { grid-template-columns: minmax(0, 1fr); } .ss-group + .ss-group { margin-top: 18px; } }

/* ---------- IV. The modern shreni ---------- */
.sh-four-h { margin: clamp(52px, 7vw, 88px) 0 clamp(26px, 3.6vw, 40px); }
.sh-four-h h3 { font-size: clamp(1.6rem, 2.6vw, 2.15rem); max-width: 30ch; }
body[data-platform="shreni"] .sea .passage::before { border-top-color: color-mix(in srgb, var(--gold-ink) 70%, transparent); }
body[data-platform="shreni"] .sea .passage li::before { border-color: var(--gold-ink); }
body[data-platform="shreni"] .passage h3 { font-size: 1.4rem; }
@media (max-width: 900px) { body[data-platform="shreni"] .sea .passage::before { border-left-color: color-mix(in srgb, var(--gold-ink) 70%, transparent); } }