/* ---------- Mayflower: new self-governing communities in the United States ----------
   Atlantic slate for the chart bands, parchment for the charter bands, weathered oak for accents,
   and one deep red, kept for the line of the patent and the Compact. Caslon for headings, Franklin for text. */
body[data-platform="mayflower"] {
  --sea: #1F2B34; --sea-deep: #151E25; --sea-raise: #293844;
  --sea-ink: #EDE6D7; --sea-ink-2: #B9C2C8; --sea-ink-3: #97A3AC; --sea-rule: rgba(237, 230, 215, .15);
  --wind-1: #D7A55E; --wind-2: #9DB3C2; --wind-3: #CF6650; --gold-ink: #E4B877; --teal-ink-sea: #A9C8DA;
  --vellum: #F1E9D8; --vellum-2: #E8DEC8; --vellum-3: #DBCEB2;
  --ink: #1C2228; --ink-2: #434B53; --ink-3: #59616A; --gilt: #714519; --teal-ink: #2B5470; --wax: #8C2A1D;
  --rule: rgba(28, 34, 40, .18); --rule-strong: rgba(28, 34, 40, .55);
  --plate-dark: #1A242C; --plate-light: #F1E5CB;
  --display: "Libre Caslon Text", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --body: "Libre Franklin", "Franklin Gothic Book", "Segoe UI", system-ui, sans-serif;
  /* the hero canvas reads these */
  --mf-swell: 170, 188, 201; --mf-lantern: 244, 196, 118; --mf-dawn: 232, 160, 128;
  --mf-coast-cold: 146, 166, 182; --mf-coast-warm: 240, 206, 156;
  /* the voyage chart */
  --mf-chart-sea: color-mix(in srgb, var(--vellum-2) 48%, var(--vellum));
  --mf-chart-land: color-mix(in srgb, var(--vellum-3) 72%, var(--vellum));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-platform="mayflower"] { --mf-chart-sea: #15130F; --mf-chart-land: #34302A; }
}
:root[data-theme="dark"] body[data-platform="mayflower"] { --mf-chart-sea: #15130F; --mf-chart-land: #34302A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-platform="mayflower"] { --vellum: #1B1815; --vellum-2: #23201C; --vellum-3: #2E2A25; --ink: #EEE7D8; --ink-2: #C5BDAF; --ink-3: #A69E91; --gilt: #E2B375; --teal-ink: #A9C8DA; --wax: #DE7E66; --rule: rgba(238, 231, 216, .16); --rule-strong: rgba(238, 231, 216, .5); --plate-light: #E4D5B8; }
}
:root[data-theme="dark"] body[data-platform="mayflower"] { --vellum: #1B1815; --vellum-2: #23201C; --vellum-3: #2E2A25; --ink: #EEE7D8; --ink-2: #C5BDAF; --ink-3: #A69E91; --gilt: #E2B375; --teal-ink: #A9C8DA; --wax: #DE7E66; --rule: rgba(238, 231, 216, .16); --rule-strong: rgba(238, 231, 216, .5); --plate-light: #E4D5B8; }

body[data-platform="mayflower"] h1, body[data-platform="mayflower"] h2 { font-weight: 400; letter-spacing: -.018em; line-height: 1.06; }
body[data-platform="mayflower"] h2 { font-size: clamp(2rem, 3.6vw, 3.05rem); }
body[data-platform="mayflower"] h3 { font-weight: 400; letter-spacing: -.01em; line-height: 1.16; }
body[data-platform="mayflower"] .motto { font-style: normal; letter-spacing: -.022em; }
body[data-platform="mayflower"] .hero-sub .cartouche h1 { font-size: clamp(2.05rem, 4.1vw, 3.35rem); line-height: 1.06; max-width: none; }
body[data-platform="mayflower"] .motto span { display: block; white-space: nowrap; }
/* open sea above the plate, where the Cape and the lantern are drawn */
body[data-platform="mayflower"] .hero-split > .plate { align-self: end; }
@media (max-width: 900px) {
  body[data-platform="mayflower"] .hero .wrap { padding-top: clamp(128px, 30vw, 176px); }
  body[data-platform="mayflower"] .hero-split > .plate { align-self: auto; }
}
body[data-platform="mayflower"] .statement { letter-spacing: -.018em; line-height: 1.14; }
body[data-platform="mayflower"] .prose strong { font-weight: 600; }
body[data-platform="mayflower"] .entry { align-content: start; }
body[data-platform="mayflower"] .plate-frame img { filter: grayscale(1) contrast(1.1) brightness(1.04); }
body[data-platform="mayflower"] .cartouche { background: linear-gradient(180deg, rgba(19, 27, 33, .84), rgba(19, 27, 33, .7)); border-color: rgba(228, 184, 119, .5); outline-color: rgba(228, 184, 119, .2); }
body[data-platform="mayflower"] .band.sea::before { transform: none; opacity: .1; background: url(../img/mayflower-swell.svg) 0 0 / 160px 28px repeat;
  -webkit-mask-image: radial-gradient(72% 95% at 88% 50%, #000, transparent 72%); mask-image: radial-gradient(72% 95% at 88% 50%, #000, transparent 72%); }
.hero canvas.mayflower-hero { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
body[data-platform="mayflower"] .legend i { height: 2px; }
.legend .mf-k-swell { background: rgb(var(--mf-swell)); opacity: .55; }
.legend .mf-k-lantern { width: 8px !important; height: 8px !important; border-radius: 50%; background: rgb(var(--mf-lantern)); box-shadow: 0 0 10px 3px rgba(var(--mf-lantern), .45); }
.legend .mf-k-coast { background: rgb(var(--mf-coast-warm)); }

/* ---------- The voyage and the charter line ---------- */
.mf-voyage { margin: 0; display: grid; grid-template-columns: minmax(0, 1.27fr) minmax(0, .73fr); gap: clamp(22px, 3vw, 44px); align-items: start; }
.mf-voyage > * { min-width: 0; }
.mf-chart { position: relative; background: var(--mf-chart-sea); box-shadow: 0 0 0 1px var(--rule-strong), 0 0 0 6px var(--vellum), 0 0 0 7px var(--rule); }
.mf-chart svg { display: block; width: 100%; height: auto; overflow: hidden; --s: 1.6; }
.mf-chart .mf-grat { fill: none; stroke: color-mix(in srgb, var(--ink) 12%, transparent); stroke-width: calc(.8px * var(--s)); }
/* water-lining: the coast drawn wide under the land, so engraved lines run along the shore on the sea side */
.mf-chart .mf-stipple { fill: none; stroke: color-mix(in srgb, var(--ink) 16%, transparent); stroke-width: calc(11px * var(--s)); stroke-linejoin: round;
  stroke-dasharray: calc(1.2px * var(--s)) calc(2.4px * var(--s)); }
.mf-chart .mf-land { fill: var(--mf-chart-land); }
.mf-chart .mf-coast { fill: none; stroke: color-mix(in srgb, var(--ink) 74%, transparent); stroke-width: calc(1px * var(--s)); stroke-linejoin: round; }
.mf-chart .mf-ground { opacity: .38; transition: opacity .6s ease; }
.mf-chart .st-0 .mf-ground { opacity: 1; }
.mf-chart .mf-hatch { stroke: var(--gilt); stroke-width: 1.15; opacity: .62; }
.mf-chart .mf-river { fill: none; stroke: color-mix(in srgb, var(--teal-ink) 75%, transparent); stroke-width: calc(1.5px * var(--s)); stroke-linejoin: round; stroke-linecap: round; }
.mf-chart .mf-41 { stroke: var(--wax); stroke-width: calc(1.7px * var(--s)); stroke-dasharray: calc(10px * var(--s)) calc(5px * var(--s)); transition: stroke-width .4s; }
.mf-chart .st-0 .mf-41, .mf-chart .st-2 .mf-41, .mf-chart .st-4 .mf-41 { stroke-width: calc(2.4px * var(--s)); }
.mf-chart text { paint-order: stroke; stroke: var(--mf-chart-sea); stroke-linejoin: round; stroke-width: calc(4px * var(--s)); transition: opacity .5s ease; }
.mf-chart .mf-limit { font: italic calc(15px * var(--s)) var(--chart); fill: var(--wax); }
.mf-chart .mf-limit .deg { font-style: normal; font-family: var(--chart-sc); }
.mf-chart .mf-tick { font: calc(12.5px * var(--s)) var(--chart); fill: var(--ink-3); }
.mf-chart .mf-region { font: calc(17px * var(--s)) var(--chart-sc); letter-spacing: .32em; fill: color-mix(in srgb, var(--ink) 62%, transparent); stroke: var(--mf-chart-land); }
.mf-chart .mf-sea-lab { font: italic calc(16px * var(--s)) var(--chart); letter-spacing: .14em; fill: color-mix(in srgb, var(--teal-ink) 80%, transparent); }
.mf-chart .mf-water { font: italic calc(14px * var(--s)) var(--chart); fill: var(--teal-ink); }
.mf-chart .mf-place { font: italic calc(14.5px * var(--s)) var(--chart); fill: var(--ink-2); }
.mf-chart .mf-course-lab { font: italic calc(14.5px * var(--s)) var(--chart); fill: var(--gilt); opacity: 0; }
/* what shows when: far labels in the full chart, near labels once it closes in on the Cape, the course day by day */
.mf-chart .far { transition: opacity .5s ease; }
.mf-chart svg:not(.v-full) .far { opacity: 0; }
.mf-chart svg.v-full .near { opacity: 0; }
.mf-chart .past-1 .s1, .mf-chart .past-2 .s2, .mf-chart .past-3 .s3, .mf-chart .past-4 .s4, .mf-chart .past-5 .s5, .mf-chart .st-3 .only3, .mf-chart .st-2 .only23, .mf-chart .st-3 .only23 { opacity: 1; }
.mf-chart .st-2 .s1 { opacity: 0; }
.mf-chart .mf-approach { fill: none; stroke: var(--gilt); stroke-width: calc(1.6px * var(--s)); stroke-dasharray: calc(5px * var(--s)) calc(5px * var(--s)); opacity: 0; transition: opacity .5s; }
.mf-chart .past-1 .mf-approach { opacity: .85; }
.mf-chart .mf-intended { fill: none; stroke: var(--gilt); stroke-width: calc(1.6px * var(--s)); stroke-dasharray: calc(2px * var(--s)) calc(4px * var(--s)); stroke-linecap: round; opacity: 0; transition: opacity .5s; }
.mf-chart .st-3 .mf-intended { opacity: .9; }
.mf-chart .past-4 .mf-intended { opacity: .35; }
.mf-chart .mf-leg { fill: none; stroke: var(--gilt); stroke-width: calc(2.3px * var(--s)); stroke-linecap: round; stroke-linejoin: round; }
.mf-chart .mf-dot circle { fill: var(--ink-2); }
.mf-chart .mf-goal { transition: opacity .5s; }
.mf-chart .mf-goal .ring { fill: none; stroke: var(--teal-ink); stroke-width: 1.4; }
.mf-chart .mf-goal circle:not(.ring) { fill: var(--teal-ink); }
.mf-chart svg:not(.v-full) .mf-goal { opacity: 0; }
.mf-chart .mf-mark, .mf-chart .mf-breakers, .mf-chart .mf-anchor, .mf-chart .mf-seal { opacity: 0; transition: opacity .5s ease; }
.mf-chart .mf-mark circle { fill: var(--gilt); stroke: var(--mf-chart-sea); stroke-width: 1.6; }
.mf-chart .mf-breakers path { fill: none; stroke: var(--ink-2); stroke-width: 1.3; stroke-linecap: round; }
.mf-chart .mf-anchor path { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mf-chart .mf-anchor circle { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.mf-chart .past-5 .mf-anchor { opacity: 0; }
.mf-chart .mf-seal circle { fill: var(--wax); stroke: var(--mf-chart-sea); stroke-width: 2; }
.mf-chart .mf-seal .star { fill: var(--mf-chart-sea); }
.mf-chart .mf-ship path { fill: var(--gilt); stroke: var(--mf-chart-sea); stroke-width: 1.4; stroke-linejoin: round; }
.mf-chart .past-5 .mf-ship { opacity: 0; }
.mf-chart .mf-ship { transition: opacity .4s; }

.mf-log { display: grid; gap: 18px; align-content: start; }
.mf-days { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.mf-days li { display: grid; gap: 8px; border-top: 1px solid var(--rule); padding-top: 14px; }
.mf-voyage.is-live .mf-days { display: none; }
.mf-log-ctl { display: grid; gap: 20px; }
.mf-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.mf-step { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--rule-strong); background: transparent; color: var(--ink-2); font: 1.02rem/1 var(--chart); cursor: pointer; display: grid; place-items: center; transition: background-color .25s, color .25s, border-color .25s; }
.mf-step.done { border-color: var(--gilt); color: var(--gilt); }
.mf-step[aria-pressed="true"] { background: var(--gilt); border-color: var(--gilt); color: var(--vellum); }
.mf-step:hover { border-color: var(--ink); }
.mf-step:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 3px; }
.mf-entry { display: grid; gap: 10px; min-height: 22.5em; align-content: start; }
.mf-date { font: clamp(1.75rem, 2.6vw, 2.3rem)/1 var(--chart); color: var(--gilt); letter-spacing: -.005em; }
.mf-ns { font: italic .98rem/1.3 var(--chart); color: var(--ink-3); margin-top: -2px; }
.mf-entry h3, .mf-days h3 { font-size: clamp(1.45rem, 2vw, 1.75rem); margin-top: 8px; }
.mf-entry p:not([class]), .mf-days p:not([class]) { color: var(--ink-2); font-size: 1rem; line-height: 1.6; }
.mf-q { font: italic 1.12rem/1.42 var(--chart); color: var(--ink); border-left: 2px solid var(--wax); padding: 2px 0 2px 14px; margin-top: 4px; }
.mf-q span { display: block; font: .92rem/1.3 var(--chart-sc); color: var(--ink-3); margin-top: 6px; letter-spacing: .02em; }
.mf-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.mf-nav .small-btn[disabled] { opacity: .4; cursor: default; }
.mf-nav .mf-next { border-color: var(--ink); }
.mf-voyage-key { grid-column: 1; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .86rem; color: var(--ink-3); margin-top: 4px; }
.mf-voyage-key span { display: inline-flex; align-items: center; gap: 8px; }
.mf-voyage-key i { display: inline-block; width: 22px; height: 0; }
.mf-voyage-key .k-line { border-top: 2px dashed var(--wax); }
.mf-voyage-key .k-ground { height: 11px; width: 16px; border: 1px solid var(--rule-strong); background: repeating-linear-gradient(-50deg, transparent 0 3px, color-mix(in srgb, var(--gilt) 62%, transparent) 3px 4.2px), var(--mf-chart-land); }
.mf-voyage-key .k-course { border-top: 2.5px solid var(--gilt); }
.mf-voyage-src { margin-top: 18px; max-width: 92ch; }
@media (max-width: 960px) {
  .mf-voyage { grid-template-columns: minmax(0, 1fr); }
  .mf-entry { min-height: 0; }
  .mf-voyage-key { grid-column: 1; }
}
@media (max-width: 600px) {
  .mf-chart .mf-region { letter-spacing: .2em; }
  .mf-chart .minor { display: none; }
  .mf-step { width: 40px; height: 40px; }
  .mf-chart .mf-lon { display: none; }
}

/* the Compact, in Bradford's hand */
.mf-compact { margin-top: clamp(64px, 9vw, 112px); scroll-margin-top: 96px; }
.mf-compact .station-text h3 { font-size: clamp(1.75rem, 2.8vw, 2.4rem); max-width: 20ch; }

/* ---------- The practice ---------- */
.mf-town { display: grid; gap: 22px; }
.mf-town h3 { font-size: clamp(1.75rem, 2.8vw, 2.4rem); color: var(--sea-ink); max-width: 24ch; }
.mf-town .prose.two-col > .sources { margin-top: 6px; }
.mf-town .prose.two-col > p:not(.sources) { break-inside: auto; }
.mf-map-plate { margin-top: clamp(28px, 4vw, 44px); }
.mf-frontier-law { margin-top: clamp(64px, 9vw, 112px); padding-top: clamp(30px, 4vw, 48px); border-top: 1px solid var(--sea-rule); display: grid; gap: clamp(28px, 4vw, 44px); }
.mf-frontier-law > * { min-width: 0; }
.mf-law-intro { display: grid; gap: 22px; }
.mf-frontier-law h3 { font-size: clamp(1.75rem, 2.8vw, 2.4rem); color: var(--sea-ink); max-width: 22ch; }
.mf-ordinance { margin: 0; display: grid; grid-template-columns: minmax(0, 1.24fr) minmax(0, .76fr); gap: clamp(26px, 4vw, 56px); align-items: start; }
.mf-ordinance > * { min-width: 0; }
@media (max-width: 900px) { .mf-ordinance { grid-template-columns: minmax(0, 1fr); } }
.mf-ord-fig { border: 1px solid var(--sea-rule); background: color-mix(in srgb, var(--sea-raise) 42%, transparent); padding: clamp(14px, 2.4vw, 26px) clamp(14px, 2.6vw, 30px); }
.mf-ord-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.mf-ord-fig .o-rail { stroke: color-mix(in srgb, var(--sea-ink) 30%, transparent); stroke-width: 2; }
.mf-ord-fig .o-run { fill: var(--gold-ink); transform-box: fill-box; transform-origin: left center; transition: transform .7s cubic-bezier(.3, .7, .2, 1); }
.mf-ord-fig .o-stop rect { fill: var(--sea); stroke: color-mix(in srgb, var(--sea-ink) 45%, transparent); stroke-width: 1.6; transition: fill .4s, stroke .4s; }
.mf-ord-fig .o-stop.on rect { fill: var(--gold-ink); stroke: var(--gold-ink); }
.mf-ord-fig .o-num { font: 30px var(--chart); fill: var(--sea-ink-3); transition: fill .4s; }
.mf-ord-fig .o-stop.on .o-num { fill: var(--sea-ink); }
.mf-ord-fig .o-sub { font: italic 17px var(--chart); fill: var(--sea-ink-3); }
.mf-ord-fig .o-cap { font: 500 13.5px var(--body); letter-spacing: .14em; text-transform: uppercase; fill: var(--sea-ink-2); }
.mf-ord-fig .o-note { font: italic 18px var(--chart); fill: var(--sea-ink-2); }
.mf-ord-fig .o-appt rect, .mf-ord-fig .o-elect circle { opacity: 0; transition: opacity .45s; }
.mf-ord-fig .o-appt rect { fill: var(--wind-2); }
.mf-ord-fig .o-elect circle { fill: var(--gold-ink); }
.mf-ord-fig .o-appt rect.on, .mf-ord-fig .o-elect circle.on { opacity: 1; }
.mf-ord-fig .o-delegate { opacity: 0; transition: opacity .45s; }
.mf-ord-fig .stage-1 .o-delegate { opacity: 1; }
.mf-ord-fig .o-delegate circle { fill: none; stroke: var(--gold-ink); stroke-width: 1.6; stroke-dasharray: 3.2 2.6; }
.mf-ord-fig .o-empty { opacity: 0; transition: opacity .45s; }
.mf-ord-fig .stage-0 .o-empty { opacity: 1; }
.mf-ord-fig .o-empty rect { fill: none; stroke: color-mix(in srgb, var(--sea-ink) 30%, transparent); stroke-dasharray: 3 4; }
.mf-ord-fig .o-body { transition: opacity .45s; }
.mf-ord-fig .stage-2 .o-body { opacity: 0; }
.mf-ord-fig .o-stars { opacity: 0; transition: opacity .55s; }
.mf-ord-fig .stage-2 .o-stars { opacity: 1; }
.mf-ord-fig .o-stars path { fill: color-mix(in srgb, var(--sea-ink) 62%, transparent); }
.mf-ord-fig .o-stars path.o-new { fill: var(--gold-ink); }
.mf-ord-fig .o-new-lab { fill: var(--gold-ink); }
.mf-ord-ctl { display: grid; gap: 16px; padding-top: 8px; }
.mf-ord-ctl .seg { justify-self: start; flex-wrap: wrap; }
.mf-ord-out { display: grid; gap: 10px; min-height: 13.5em; align-content: start; }
.mf-ord-when { font: 400 1.5rem/1.2 var(--display); color: var(--sea-ink); }
.mf-ord-q { font: italic 1.12rem/1.42 var(--chart); color: var(--sea-ink); border-left: 2px solid var(--wind-3); padding-left: 14px; }
.mf-ord-text { color: var(--sea-ink-2); font-size: 1rem; }
@media (max-width: 600px) {
  .mf-ord-fig .o-num { font-size: 36px; }
  .mf-ord-fig .o-sub { font-size: 21px; }
  .mf-ord-fig .o-note { font-size: 22.5px; }
  .mf-ord-fig .o-cap { font-size: 17px; }
  .mf-ord-out { min-height: 0; }
}
.mf-statement { margin-top: clamp(64px, 9vw, 112px); }

/* ---------- The new frontier ---------- */
.mf-ledger { margin-top: clamp(40px, 6vw, 64px); }
body[data-platform="mayflower"] .mf-ledger .ledger-head div { color: var(--wax); }
body[data-platform="mayflower"] .mf-ledger .ledger-head, body[data-platform="mayflower"] .mf-ledger .ledger-foot { border-color: color-mix(in srgb, var(--wax) 60%, transparent); }
body[data-platform="mayflower"] .mf-ledger .ledger-col + .ledger-col { border-color: color-mix(in srgb, var(--wax) 60%, transparent); }
body[data-platform="mayflower"] .mf-ledger .ledger-entry { border-bottom-color: color-mix(in srgb, var(--gilt) 26%, transparent); }