/* ---------- Serenissima: families seeking a durable second base ----------
   Lagoon green-gray for the chart, Istrian stone white for the charter, deep Venetian red for the hand that marks it,
   and the rose of the Doge's Palace where the system would use gold. Gold leaf appears once: the dot that becomes the
   doge in the election figure. Bodoni Moda for display, Hanken Grotesk for the little body text there is. */
body[data-platform="serenissima"] {
  --sea: #253331; --sea-deep: #1B2624; --sea-raise: #2F3F3C;
  --sea-ink: #EEECE5; --sea-ink-2: #B7C2BC; --sea-ink-3: #94A29C; --sea-rule: rgba(238, 236, 229, .14);
  --wind-1: #C9907F; --wind-2: #9FBDB3; --wind-3: #A8402F; --gold-ink: #DDB3A4; --teal-ink-sea: #A9CCC2;
  --vellum: #F1EFE9; --vellum-2: #E8E5DC; --vellum-3: #DBD7CB;
  --ink: #1C2523; --ink-2: #47524E; --ink-3: #5A6460; --gilt: #8C2D22; --teal-ink: #2D5E56; --wax: #8C2D22;
  --rule: rgba(28, 37, 35, .15); --rule-strong: rgba(28, 37, 35, .48);
  --plate-dark: #1F2B29; --plate-light: #F0EDE4;
  --display: "Bodoni Moda", "Bodoni 72", Didot, "Iowan Old Style", Georgia, serif;
  --body: "Hanken Grotesk", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --band-pad: clamp(84px, 11vw, 152px);
  --measure: 58ch;
  /* the hero's lagoon, as r,g,b for the canvas */
  --sr-ripple: 222, 231, 226; --sr-mist: 206, 217, 212; --sr-warm: 240, 190, 160;
  --sr-rose: #DDA898;
  --sr-leaf-1: #F7E6A6; --sr-leaf-2: #D4AE52; --sr-leaf-3: #8F6B1E;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-platform="serenissima"] { --vellum: #131918; --vellum-2: #19201F; --vellum-3: #222B29; --ink: #ECEAE3; --ink-2: #BAC3BE; --ink-3: #9AA49F; --gilt: #E5A493; --teal-ink: #9CC8BD; --wax: #E0806A; --rule: rgba(236, 234, 227, .15); --rule-strong: rgba(236, 234, 227, .45); --plate-light: #DAD6CB; }
}
:root[data-theme="dark"] body[data-platform="serenissima"] { --vellum: #131918; --vellum-2: #19201F; --vellum-3: #222B29; --ink: #ECEAE3; --ink-2: #BAC3BE; --ink-3: #9AA49F; --gilt: #E5A493; --teal-ink: #9CC8BD; --wax: #E0806A; --rule: rgba(236, 234, 227, .15); --rule-strong: rgba(236, 234, 227, .45); --plate-light: #DAD6CB; }

/* Type: a high-contrast face, set large and quiet, with air around it */
body[data-platform="serenissima"] { font-weight: 400; }
body[data-platform="serenissima"] h1, body[data-platform="serenissima"] h2, body[data-platform="serenissima"] h3 { font-weight: 400; letter-spacing: -.008em; }
body[data-platform="serenissima"] h2 { font-size: clamp(2.05rem, 3.7vw, 3.15rem); line-height: 1.06; }
body[data-platform="serenissima"] h3 { font-size: clamp(1.4rem, 1.9vw, 1.62rem); }
body[data-platform="serenissima"] .motto { font-style: italic; letter-spacing: -.005em; line-height: 1.04; }
body[data-platform="serenissima"] .lede { font-weight: 300; }
body[data-platform="serenissima"] .prose p, body[data-platform="serenissima"] .lede, body[data-platform="serenissima"] .entry p { text-wrap: pretty; }
body[data-platform="serenissima"] .statement { font-style: italic; letter-spacing: -.01em; line-height: 1.1; }

/* The hero: the lagoon at first light */
.hero canvas.serenissima-hero { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
body[data-platform="serenissima"] .hero { background: linear-gradient(180deg, var(--sea-deep) 0%, var(--sea) 58%, #202D2B 100%); }
body[data-platform="serenissima"] .cartouche { background: linear-gradient(180deg, rgba(27, 38, 36, .72), rgba(27, 38, 36, .52));
  border-color: rgba(238, 236, 229, .3); outline-color: rgba(238, 236, 229, .1); }
body[data-platform="serenissima"] .cartouche::before, body[data-platform="serenissima"] .cartouche::after { border-color: var(--sea-ink-2); opacity: .55; }
body[data-platform="serenissima"] .cartouche .place { font: 500 .74rem/1.4 var(--body); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--sea-ink-2); margin-bottom: 26px; }
body[data-platform="serenissima"] .hero-sub .cartouche h1 { font-size: clamp(2.5rem, 5.4vw, 4.6rem); max-width: 11ch; }
body[data-platform="serenissima"] .cartouche .lede { margin-top: 26px; font-size: clamp(1.1rem, 1.45vw, 1.26rem); color: var(--sea-ink-2); max-width: none; }
body[data-platform="serenissima"] .hero .plate .plate-frame { outline-color: rgba(238, 236, 229, .2); box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .75); }
body[data-platform="serenissima"] .legend i { height: 2px; }
.legend .sr-lg-ripple { background: repeating-linear-gradient(90deg, rgba(222, 231, 226, .85) 0 5px, transparent 5px 8px); }
.legend .sr-lg-mist { height: 6px !important; border-radius: 6px; background: radial-gradient(closest-side, rgba(206, 217, 212, .7), transparent); }
.legend .sr-lg-light { background: linear-gradient(90deg, transparent, rgba(240, 190, 160, .95), transparent); }

/* Plates: a cool duotone at rest */
body[data-platform="serenissima"] .plate-frame img { filter: grayscale(1) contrast(1.12) brightness(1.1); }
body[data-platform="serenissima"] .hero .plate-frame img, body[data-platform="serenissima"] .sea .plate-frame img { filter: grayscale(1) contrast(1.14) brightness(1.28); }
body[data-platform="serenissima"] .hero, body[data-platform="serenissima"] .band.sea { --plate-light: #E5ECE7; --plate-dark: #223230; }

body[data-platform="serenissima"] .plate-frame img[src*="serenissima-malghera"] { filter: grayscale(1) contrast(1.32) brightness(1.14); }
body[data-platform="serenissima"] .plate .pl-cap { text-wrap: pretty; }

/* Sea bands carry the arcade of the Doge's Palace loggia */
body[data-platform="serenissima"] .band.sea::before { transform: none; opacity: .07; background: url(../img/serenissima-arcade.svg) 0 0 / 44px 60px repeat;
  -webkit-mask-image: radial-gradient(70% 95% at 88% 45%, #000, transparent 72%); mask-image: radial-gradient(70% 95% at 88% 45%, #000, transparent 72%); }

/* A heading with its text beside it, and the quotation that closes the refuge */
.sr-pair { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.sr-pair > * { min-width: 0; }
.sr-pair-head { align-items: start; margin-bottom: clamp(40px, 5.5vw, 72px); }
.sr-pair-head h2 { max-width: 17ch; }
@media (max-width: 900px) { .sr-pair { grid-template-columns: minmax(0, 1fr); } .sr-pair-head { gap: 22px; } }
.sr-quote { margin: 0; padding: 4px 0 6px clamp(20px, 2.4vw, 32px); border-left: 1px solid var(--gilt); display: grid; gap: 16px; }
.sr-quote blockquote { margin: 0; }
.sr-quote blockquote p { font: italic 400 clamp(1.6rem, 2.5vw, 2.15rem)/1.22 var(--display); color: var(--ink); letter-spacing: -.005em; text-wrap: balance; }
.sr-quote blockquote p::before { content: "\201C"; }
.sr-quote blockquote p::after { content: "\201D"; }
.sr-quote figcaption { font-size: .86rem; color: var(--ink-3); max-width: 34ch; }

/* The election of a doge */
.sr-election { margin: 0; padding-top: clamp(26px, 3.6vw, 40px); border-top: 1px solid var(--sea-rule); display: grid; gap: 18px; }
.sr-el-title { font: 500 .74rem/1.4 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--sea-ink-3); }
.sr-el-fig { width: 100%; max-width: 900px; }
.sr-el-fig svg { width: 100%; height: auto; display: block; overflow: visible; }
.sr-el-fig .council { fill: url(#sr-council-dots); }
.sr-el-fig .council-edge { fill: none; stroke: color-mix(in srgb, var(--sea-ink) 22%, transparent); stroke-width: 1; }
.sr-el-fig .c-lab { font: italic 15px var(--chart); fill: var(--sea-ink-2); }
.sr-el-fig .num { font: 400 15px var(--display); fill: var(--sea-ink-3); transition: fill .4s; }
.sr-el-fig .tag { font: italic 14.5px var(--chart); fill: var(--sea-ink-3); transition: fill .4s, opacity .4s; }
.sr-el-fig .d { transition: fill .45s, stroke .45s, opacity .45s; }
.sr-el-fig .row.lot .d { fill: var(--sr-rose); }
.sr-el-fig .row.vote .d { fill: var(--sea); stroke: var(--sea-ink); stroke-width: 1.25; }
.sr-el-fig .row.doge .d { fill: url(#sr-leaf); stroke: none; }
.sr-el-fig .row.past .d { opacity: .5; }
.sr-el-fig .row.voting .d { opacity: 1; }
.sr-el-fig .row.ghost .d { fill: color-mix(in srgb, var(--sea-ink) 15%, transparent); stroke: none; opacity: 1; }
.sr-el-fig .row.ghost .num { opacity: .7; }
.sr-el-fig .row.cur .num { fill: var(--sr-rose); }
.sr-el-fig .row.cur .tag { fill: var(--sea-ink); }
.sr-el-fig .row.past .tag, .sr-el-fig .row.past .num { fill: var(--sea-ink-2); }
.sr-el-fig .mark { fill: none; stroke: var(--sr-rose); stroke-width: 1.3; opacity: 0; transition: opacity .45s; }
.sr-el-fig .mark.on { opacity: .95; }
.sr-el-fig .halo { fill: none; stroke: var(--sr-leaf-2); stroke-width: 1; opacity: 0; transition: opacity .8s .5s; }
.sr-el-fig .row.doge.cur .halo { opacity: .55; }
.sr-el-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.sr-el-next { min-width: 11.5em; }
.sr-el-rounds { display: inline-flex; flex-wrap: wrap; gap: 2px; }
.sr-el-rounds button { font: 400 .98rem/1 var(--display); color: var(--sea-ink-3); background: none; border: 0; border-bottom: 1px solid transparent; padding: 8px 7px 6px; min-width: 2.1em; cursor: pointer; }
.sr-el-rounds button:hover { color: var(--sea-ink); }
.sr-el-rounds button.done { color: var(--sea-ink-2); }
.sr-el-rounds button[aria-pressed="true"] { color: var(--sr-rose); border-bottom-color: var(--sr-rose); }
.sr-el-rounds button:focus-visible { outline: 2px solid var(--teal-ink-sea); outline-offset: 1px; }
.sr-el-line { text-wrap: pretty; font: italic 1.12rem/1.45 var(--chart); color: var(--sea-ink-2); min-height: 3em; max-width: 60ch; margin: 0; }
.sr-el-line b { font-style: normal; font-family: var(--chart-sc); font-weight: 400; color: var(--sr-rose); margin-inline-end: 8px; }
.sr-el-note { text-wrap: pretty; font-size: .9rem; line-height: 1.5; color: var(--sea-ink-3); max-width: 64ch; }
@media (max-width: 640px) {
  .sr-el-fig .c-lab { font-size: 13px; }
  .sr-el-fig .num { font-size: 13.5px; }
  .sr-el-ctl { gap: 12px; }
  .sr-el-rounds button { padding: 8px 5px 6px; min-width: 1.9em; font-size: .92rem; }
}
body[data-platform="serenissima"] .sea .small-btn { border-color: color-mix(in srgb, var(--sea-ink) 45%, transparent); }

/* The modern lagoon */
.sr-entries { margin-top: 4px; }
body[data-platform="serenissima"] .entry h3 { font-size: 1.5rem; }
.sr-law { text-wrap: pretty; margin-top: 26px; font-size: .95rem; line-height: 1.55; color: var(--ink-3); max-width: 58ch; padding-left: 16px; border-left: 1px solid var(--rule-strong); }

/* By introduction */
.sr-invite { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.sr-invite > * { min-width: 0; }
.sr-invite-text { display: grid; gap: 26px; justify-items: start; }
.sr-invite h2 { max-width: 14ch; }
.sr-invite .lede { max-width: 40ch; }
@media (max-width: 900px) { .sr-invite { grid-template-columns: minmax(0, 1fr); } }
body[data-platform="serenissima"] .sea .btn-ink.sr-btn { background: var(--sea-ink); color: var(--sea-deep); padding: 16px 28px; letter-spacing: .02em; }
body[data-platform="serenissima"] .sea .btn-ink.sr-btn:hover { background: var(--gold-ink); color: var(--sea-deep); }

/* The close */
.sr-close .statement { font-size: clamp(1.9rem, 3.2vw, 2.7rem); max-width: 17ch; }
body[data-platform="serenissima"] .sr-close { --band-pad: clamp(72px, 9vw, 120px); }