/* ---------- Solon: founders building new jurisdictions ----------
   Pentelic marble, olive, bronze and a deep Aegean blue. Headings in Marcellus, a flared face drawn from inscribed
   capitals; body in Commissioner, a humanist sans of classical proportion. The sea bands carry a faint ashlar course. */
body[data-platform="solon"] {
  --sea: #0E2A45; --sea-deep: #091E33; --sea-raise: #143A5C;
  --sea-ink: #F1ECE2; --sea-ink-2: #B6C0CB; --sea-ink-3: #93A1B0; --sea-rule: rgba(241, 236, 226, .14);
  --wind-1: #C9954E; --wind-2: #A7B36B; --wind-3: #7FB2D8; --gold-ink: #D8A75F; --teal-ink-sea: #C3CC8B;
  --vellum: #F3EFE7; --vellum-2: #EAE5DA; --vellum-3: #DDD6C7;
  --ink: #18212B; --ink-2: #434B55; --ink-3: #59616B; --gilt: #80521A; --teal-ink: #4C5A1A; --wax: #8C3A28;
  --rule: rgba(24, 33, 43, .17); --rule-strong: rgba(24, 33, 43, .5);
  --plate-dark: #0E2741; --plate-light: #F1EADB;
  --display: "Marcellus", "Optima", "Candara", Georgia, serif;
  --display-sc: "Marcellus SC", "Marcellus", "Optima", Georgia, serif;
  --body: "Commissioner", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* the hero canvas reads these as r,g,b */
  --sl-marble: 241, 236, 226; --sl-bronze: 217, 168, 98; --sl-aegean: 127, 178, 216; --sl-shadow: 3, 12, 22;
  --sl-tyr: #D9785B;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-platform="solon"] { --vellum: #12181F; --vellum-2: #18202A; --vellum-3: #222C37; --ink: #ECE7DC; --ink-2: #BDB7AB; --ink-3: #9E998F; --gilt: #D9A866; --teal-ink: #BCC67E; --wax: #DB7B5E; --rule: rgba(236, 231, 220, .16); --rule-strong: rgba(236, 231, 220, .5); --plate-light: #DED6C6; }
}
:root[data-theme="dark"] body[data-platform="solon"] { --vellum: #12181F; --vellum-2: #18202A; --vellum-3: #222C37; --ink: #ECE7DC; --ink-2: #BDB7AB; --ink-3: #9E998F; --gilt: #D9A866; --teal-ink: #BCC67E; --wax: #DB7B5E; --rule: rgba(236, 231, 220, .16); --rule-strong: rgba(236, 231, 220, .5); --plate-light: #DED6C6; }

/* Type */
body[data-platform="solon"] h1, body[data-platform="solon"] h2, body[data-platform="solon"] h3 { font-weight: 400; letter-spacing: .002em; }
body[data-platform="solon"] h2 { font-size: clamp(2rem, 3.6vw, 3.05rem); line-height: 1.08; }
body[data-platform="solon"] h3 { font-size: clamp(1.4rem, 2vw, 1.72rem); line-height: 1.16; }
body[data-platform="solon"] .motto { font-style: normal; letter-spacing: 0; line-height: 1.04; }
body[data-platform="solon"] .hero-sub .cartouche h1 { font-size: clamp(2.35rem, 4.6vw, 3.95rem); max-width: 17ch; }
body[data-platform="solon"] .cartouche .place { font-family: var(--display-sc); font-style: normal; font-size: .98rem; letter-spacing: .09em; }
body[data-platform="solon"] .waypoint .wp-num { font-family: var(--display-sc); letter-spacing: .06em; }
body[data-platform="solon"] .statement { font-size: clamp(1.75rem, 3.2vw, 2.65rem); line-height: 1.16; letter-spacing: 0; }
body[data-platform="solon"] .entry h3, body[data-platform="solon"] .ledger-entry h4 { letter-spacing: .002em; }

/* Hero: the inscribed wall and its plate */
.hero canvas.solon-hero { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
body[data-platform="solon"] .cartouche { background: linear-gradient(180deg, rgba(7, 22, 38, .82), rgba(7, 22, 38, .7));
  border-color: rgba(217, 168, 98, .5); outline-color: rgba(217, 168, 98, .2); }
body[data-platform="solon"] .hero .plate .plate-frame { outline-color: rgba(217, 168, 98, .38); }

/* Plates: Aegean shadows, marble lights */
body[data-platform="solon"] .plate-frame img { filter: grayscale(1) contrast(1.2) brightness(1.05); }

/* Sea bands: a faint course of ashlar */
body[data-platform="solon"] .band.sea::before { transform: none; opacity: .075; background: url(../img/solon-ashlar.svg) 0 0 / 132px 66px 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%); }

/* ---------- I. The classes: a flight of steps on a common foundation ---------- */
.sc { margin: clamp(48px, 7vw, 88px) 0 0; display: grid; gap: clamp(20px, 3vw, 30px); border-top: 1px solid var(--rule-strong); padding-top: clamp(26px, 4vw, 40px); }
.sc > * { min-width: 0; }
.sc-head { display: grid; gap: 12px; max-width: 64ch; }
.sc-head p { color: var(--ink-2); }
.sc-fig svg { width: 100%; height: auto; display: block; overflow: visible; touch-action: pan-y; }
.sc-fig .slab, .sc-fig .step { fill: color-mix(in srgb, var(--ink) 4%, var(--vellum)); stroke: var(--rule-strong); stroke-width: 1; transition: fill .35s ease; }
.sc-fig .slab.on, .sc-fig .step.on { fill: color-mix(in srgb, var(--gilt) 22%, var(--vellum)); }
.sc-fig .joint { stroke: var(--rule); stroke-width: 1; }
.sc-fig .band-lab { font: 13px var(--display-sc); letter-spacing: .1em; fill: var(--ink-3); paint-order: stroke; stroke: color-mix(in srgb, var(--ink) 4%, var(--vellum)); stroke-width: 5px; stroke-linejoin: round; transition: fill .35s; }
.sc-fig .band-lab.on { fill: var(--ink); stroke: color-mix(in srgb, var(--gilt) 22%, var(--vellum)); }
.sc-fig .cls { font: 14px var(--display-sc); letter-spacing: .07em; fill: var(--ink-3); text-anchor: middle; transition: fill .35s; }
.sc-fig .cls.on { fill: var(--gilt); }
.sc-fig .axis { stroke: var(--rule-strong); stroke-width: 1; }
.sc-fig .tick line { stroke: var(--rule-strong); }
.sc-fig .tick text { font: 12px var(--body); fill: var(--ink-3); text-anchor: middle; }
.sc-fig .tick.key text { font: 16px var(--display); fill: var(--ink); }
.sc-fig .unit { font: italic 13px var(--chart); fill: var(--ink-3); text-anchor: end; }
.sc-fig .hh { transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.sc-fig .hh line { stroke: var(--teal-ink); stroke-width: 1.6; }
.sc-fig .hh path { fill: var(--teal-ink); stroke: var(--vellum); stroke-width: 1.5; }
.sc-fig .hh text { font: 17px var(--display); fill: var(--teal-ink); text-anchor: middle; paint-order: stroke; stroke: var(--vellum); stroke-width: 5px; stroke-linejoin: round; }
.sc-fig .hh .hh-cap { transition: transform .3s ease; }
.sc-fig .hit { fill: transparent; cursor: ew-resize; }
.sc-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 60px); align-items: start; }
.sc-body > * { min-width: 0; }
.sc-ctl { display: grid; gap: 10px; }
.sc-slide { align-items: start; }
.sc-track { position: relative; display: block; padding-bottom: 20px; }
.sc-track .acc-ticks { bottom: 0; }
.sc-slide .q-result { padding-top: 2px; }
.sc-read { margin-top: 10px; display: grid; gap: 6px; min-height: 10.5em; align-content: start; }
.sc-name { font: 400 clamp(1.55rem, 2.6vw, 2.05rem)/1.12 var(--display); color: var(--ink); overflow-wrap: anywhere; }
.sc-gloss { font: italic 1.06rem/1.3 var(--chart); color: var(--gilt); }
.sc-text { color: var(--ink-2); max-width: 48ch; }
.sc-rights { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.sc-rights li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 2px; border-bottom: 1px solid var(--rule); }
.sc-rights .sc-r { display: inline-flex; align-items: baseline; gap: 12px; font: 400 1.18rem/1.25 var(--display); color: var(--ink); transition: color .3s; }
.sc-rights .sc-r::before { content: ""; flex: none; width: 8px; height: 8px; transform: translateY(-1px) rotate(45deg); background: var(--gilt); border: 1px solid var(--gilt); transition: background-color .3s, border-color .3s; }
.sc-rights .sc-from { font-size: .86rem; color: var(--ink-3); white-space: nowrap; }
.sc-rights li.off .sc-r { color: var(--ink-3); }
.sc-rights li.off .sc-r::before { background: transparent; border-color: var(--rule-strong); }
.sc .sources { margin-top: 0; max-width: 78ch; }

/* The shield, and Aristotle's three features */
.sl-shield { margin-top: clamp(52px, 7vw, 92px); align-items: start; }
.sl-shield .station-text { gap: 18px; }
body[data-platform="solon"] .sl-shield .statement { color: var(--ink); max-width: 24ch; font-size: clamp(1.55rem, 2.5vw, 2.1rem); line-height: 1.2; }
.charter-panel .cp-head { font: italic 1.1rem/1.4 var(--chart); color: var(--ink-2); }
body[data-platform="solon"] .charter-panel .clause > span:first-child { font-family: var(--display-sc); letter-spacing: .05em; }
.charter-panel .sources { margin-top: 4px; }

/* ---------- II. The ten years, and after ---------- */
.sy { margin: clamp(44px, 6vw, 76px) 0 0; display: grid; gap: clamp(18px, 2.6vw, 28px); border-top: 1px solid var(--sea-rule); padding-top: clamp(26px, 4vw, 40px); }
.sy > * { min-width: 0; }
.sy-head { display: grid; gap: 10px; }
.sy-head h3 { color: var(--sea-ink); }
.sy-head p { color: var(--sea-ink-2); max-width: 60ch; }
.sy-fig svg { width: 100%; height: auto; display: block; overflow: visible; }
.sy-fig .yr { fill: color-mix(in srgb, var(--sea-ink) 56%, var(--sea)); transition: fill .3s; }
.sy-fig .yr.solon { fill: var(--gold-ink); }
.sy-fig .yr.none { fill: none; stroke: color-mix(in srgb, var(--sea-ink) 55%, transparent); stroke-width: 1; stroke-dasharray: 3 3; }
.sy-fig .yr.over { fill: url(#sl-hatch); stroke: var(--gold-ink); stroke-width: 1; }
.sy-fig .yr.tyr { fill: var(--sl-tyr); }
.sy-fig .sliver { fill: color-mix(in srgb, var(--sea-ink) 82%, var(--sea)); }
.sy-fig .sel-ring { fill: none; stroke: var(--gold-ink); stroke-width: 2; }
.sy-fig .caret { fill: var(--gold-ink); }
.sy-fig .laws { stroke: var(--gold-ink); stroke-width: 2.4; stroke-linecap: round; }
.sy-fig .laws-end { fill: var(--gold-ink); }
.sy-fig .bracket { fill: none; stroke: color-mix(in srgb, var(--sea-ink) 62%, transparent); stroke-width: 1; }
.sy-fig .lab { font: 13px var(--display-sc); letter-spacing: .09em; fill: var(--sea-ink-2); }
.sy-fig .lab.gold { fill: var(--gold-ink); }
.sy-fig .yl { font: 14px var(--display); fill: var(--sea-ink-3); text-anchor: middle; transition: fill .3s; }
.sy-fig .yl.on { fill: var(--gold-ink); }
.sy-fig .tk { stroke: color-mix(in srgb, var(--sea-ink) 40%, transparent); }
.sy-fig .hit { fill: transparent; cursor: pointer; }
.sy-body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 60px); align-items: start; }
.sy-body > * { min-width: 0; }
.sy-keys { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; border-top: 1px solid var(--sea-rule); }
.sy-keys li { border-bottom: 1px solid var(--sea-rule); }
.sy-keys button { all: unset; box-sizing: border-box; display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 13px 2px; cursor: pointer; }
.sy-keys button:focus-visible { outline: 2px solid var(--teal-ink-sea); outline-offset: 2px; }
.sy-keys .sy-k { font: 1.02rem/1 var(--display); color: var(--sea-ink-3); min-width: 2.5em; transition: color .25s; }
.sy-keys .sy-n { font: 400 1.16rem/1.2 var(--display); color: var(--sea-ink-2); transition: color .25s; }
.sy-keys button:hover .sy-n { color: var(--sea-ink); }
.sy-keys button[aria-pressed="true"] .sy-k { color: var(--gold-ink); }
.sy-keys button[aria-pressed="true"] .sy-n { color: var(--sea-ink); }
.sy-read { display: grid; gap: 8px; align-content: start; min-height: 12.5em; border-left: 2px solid var(--gold-ink); padding: 2px 0 4px 22px; }
.sy-when { font: italic 1.06rem var(--chart); color: var(--gold-ink); }
.sy-title { font: 400 1.6rem/1.15 var(--display); color: var(--sea-ink); }
.sy-text { color: var(--sea-ink-2); max-width: 52ch; }
.sy-src { font-size: .84rem; color: var(--sea-ink-3); }
.sy-key { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .86rem; color: var(--sea-ink-3); }
.sy-key > span { display: inline-flex; align-items: center; gap: 8px; }
.sy-key i { width: 16px; height: 11px; display: inline-block; box-sizing: border-box; }
.sy-key .k-solon { background: var(--gold-ink); }
.sy-key .k-arch { background: color-mix(in srgb, var(--sea-ink) 56%, var(--sea)); }
.sy-key .k-none { border: 1px dashed color-mix(in srgb, var(--sea-ink) 55%, transparent); }
.sy-key .k-over { border: 1px solid var(--gold-ink); background: repeating-linear-gradient(45deg, transparent 0 2px, var(--gold-ink) 2px 3.2px); }
.sy-key .k-ten { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--sea-ink) 82%, var(--sea)) 0 1.1px, transparent 1.1px 1.9px); }
.sy-key .k-tyr { background: var(--sl-tyr); }
.sy-key .sy-foot { display: block; flex-basis: 100%; font-size: .8rem; line-height: 1.45; max-width: 78ch; }
.sy-key .sy-foot a { color: inherit; }

.sl-stepback { margin-top: clamp(56px, 8vw, 100px); display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 60px); align-items: start; }
.sl-stepback > * { min-width: 0; }
.sl-stepback .statement { color: var(--sea-ink); max-width: 13ch; }

/* ---------- III. The founder's gap ---------- */
.sl-ledger { margin-top: clamp(52px, 7vw, 92px); }
body[data-platform="solon"] .ledger-head div, body[data-platform="solon"] .ledger-col + .ledger-col::before { font-family: var(--display-sc); letter-spacing: .07em; }
.sl-economy { margin-top: clamp(52px, 7vw, 92px); }
.sl-economy .station-text h3 { max-width: 20ch; }

/* ---------- IV. What we build ---------- */
.sl-works { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sea-rule); }
.sl-works li { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 10px clamp(24px, 4vw, 56px); padding: 24px 0 26px; border-bottom: 1px solid var(--sea-rule); align-items: baseline; }
.sl-works h3 { display: flex; align-items: baseline; gap: 14px; color: var(--sea-ink); }
.sl-works h3::before { content: ""; flex: none; width: 8px; height: 8px; transform: translateY(-.18em) rotate(45deg); background: var(--gold-ink); }
.sl-works p { color: var(--sea-ink-2); max-width: 58ch; }
.sl-note { margin-top: 26px; max-width: 72ch; }

/* ---------- V. Solon's test ---------- */
.sl-test { max-width: 780px; }
.sl-test .clause { font-size: clamp(1.14rem, 1.6vw, 1.3rem); }

/* ---------- Narrow screens ---------- */
@media (max-width: 900px) {
  .sc-body, .sy-body, .sl-stepback { grid-template-columns: minmax(0, 1fr); }
  .sc-read, .sy-read { min-height: 0; }
}
@media (max-width: 760px) {
  .sl-works li { grid-template-columns: minmax(0, 1fr); }
  .sl-works p { padding-left: 22px; }
}
@media (max-width: 520px) {
  .sc-rights li { flex-wrap: wrap; gap: 4px 16px; }
  .sy-keys { gap: 0 14px; }
  .sy-keys .sy-k { min-width: 2.3em; }
}