/* The codex page: a plate in an old natural history. Aged paper (paper.jpg, made by the
   build) darkening toward the edges; the drawings are printed into the paper (their white is multiplied
   away), set in an old-style face, with ruled and ornamented heads. */
:root {
  --paper: #ece1c6;
  --paper-light: #f3ead5;
  --ink: #2f2317;
  --faded: #6e5c46;
  --rule: #c2ad86;
  --rule-dark: #8f7856;
  --accent: #7b2d1e;
  --verdigris: #4c6450;
  --display: "IM Fell English", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sc: "IM Fell English SC", "IM Fell English", "Palatino Linotype", Palatino, Georgia, serif;
  --body: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}
* { box-sizing: border-box; }
html {
  background-color: var(--paper);
  background-image: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(110, 80, 40, .2) 100%), url("paper.jpg");
  background-attachment: fixed, scroll;
}
body { margin: 0; color: var(--ink); font: 18px/1.55 var(--body); font-feature-settings: "liga", "onum"; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.page { max-width: 1160px; margin: 0 auto; padding: 24px 16px 96px; }
@media (min-width: 760px) { .page { padding: 32px 40px 120px; } }

/* a drawing printed into the page: its white paper becomes this paper */
img.ink, image.ink { mix-blend-mode: multiply; filter: sepia(.12) saturate(.92); }

/* masthead */
nav.top { display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; font: 14px var(--sc);
  letter-spacing: .06em; color: var(--faded); padding-bottom: 8px; border-bottom: 1px solid var(--rule-dark);
  box-shadow: 0 3px 0 -2px var(--rule-dark); }
nav.top a { text-decoration: none; }
header.entry { text-align: center; margin: 44px auto 0; max-width: 820px; }
header.entry .kind { margin: 0; font: italic 17px var(--display); color: var(--accent); }
header.entry .kind a { text-decoration-color: rgba(123, 45, 30, .35); }
header.entry h1 { font: normal clamp(44px, 8vw, 78px)/1.02 var(--display); margin: 8px 0 6px; letter-spacing: .01em; }
header.entry h1::after { content: "❦"; display: block; font-size: 22px; color: var(--accent); margin-top: 10px; }
.species { font: 22px var(--display); margin: 4px 0 0; }
.species i { font-size: 24px; }
.species .sep { color: var(--accent); margin: 0 12px; }
.etym { color: var(--faded); max-width: 66ch; margin: 10px auto 0; font-size: 16px; font-style: italic; }

/* the specimen label, as pinned beneath a specimen in a cabinet */
dl.label { display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); margin: 34px 0 44px;
  background: var(--paper-light); border: 3px double var(--rule-dark); padding: 4px 6px;
  box-shadow: 1px 2px 6px rgba(70, 50, 20, .12); }
dl.label div { padding: 8px 10px 10px; border-right: 1px dotted var(--rule); }
dl.label div:last-child { border-right: 0; }
dl.label dt { font: 13px var(--sc); letter-spacing: .08em; color: var(--faded); }
dl.label dd { margin: 1px 0 0; font: 19px var(--display); }
dl.label small { display: block; color: var(--faded); font: italic 13.5px/1.25 var(--body); }

/* the plate and its reading */
.plate { display: grid; gap: 32px; }
@media (min-width: 880px) { .plate { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 52px; align-items: start; } }
.plate figure { margin: 0; padding: 14px; border: 3px double var(--rule-dark); }
.plate figure img { width: 100%; display: block; }
.plate figcaption { font: italic 15px var(--display); color: var(--faded); text-align: center; margin-top: 8px; }
.stale { display: block; color: var(--accent); margin-top: 4px; }
.lead { font-size: 21px; line-height: 1.5; margin: 0; }
.lead::first-letter { float: left; font: 74px/.8 var(--display); color: var(--accent); padding: 6px 10px 0 0; }
blockquote.stance { margin: 26px 0; padding: 0 0 0 20px; border-left: 1px solid var(--accent); font: italic 22px/1.4 var(--display); }
blockquote.stance::before { content: "“"; color: var(--accent); }
blockquote.stance::after { content: "”"; color: var(--accent); }
.field { color: var(--faded); font-style: italic; }
.provocation { margin-top: 22px; padding: 14px 18px; background: var(--paper-light); border-top: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark); }
.provocation p { margin: 4px 0 0; font: italic 20px/1.4 var(--display); }
.rel { font: 13px var(--sc); font-style: normal; letter-spacing: .08em; color: var(--accent); margin-right: 6px; }

/* section heads: a title between double rules, with a fleuron */
h2 { display: flex; align-items: center; gap: 18px; font: normal 21px var(--sc); letter-spacing: .06em; margin: 76px 0 28px; }
h2::before, h2::after { content: ""; flex: 1; height: 4px; border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule-dark); }
h2 span { white-space: nowrap; }
h2 span::before { content: "❧"; color: var(--accent); margin-right: 10px; }
h2 b { font-weight: normal; color: var(--accent); margin-right: 6px; }
h3.sub { font: 16px var(--sc); letter-spacing: .08em; color: var(--faded); margin: 40px 0 14px; text-align: center; }

/* dissection: figures with captions, the dominant organ twice as wide */
.organs { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 34px 28px; }
.organ { margin: 0; display: flex; flex-direction: column; }
/* every organ the same size; the dominant one is marked by a frame, not by more room */
.organ.dominant > img { outline: 3px double var(--accent); outline-offset: -3px; }
.organ > img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.organ .members, .organ .value { aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 16px; }
.organ .value { align-items: center; font: italic 26px var(--display); }
.organ figcaption { border-top: 1px solid var(--rule-dark); padding-top: 8px; }
.organ .fig { margin: 0; font: italic 15px var(--display); color: var(--faded); }
.organ .fig span { font: normal 18px var(--sc); color: var(--ink); letter-spacing: .05em; margin-left: 4px; }
.mark { display: block; font: italic 14.5px var(--display); color: var(--accent); }
.mark.from { color: var(--verdigris); }
.organ .name { margin: 2px 0 4px; font: italic 19px var(--display); color: var(--ink); }
.organ .q { color: var(--faded); font-size: 14.5px; font-style: italic; margin: 4px 0 6px; line-height: 1.35; }
.organ .statement { margin: 0 0 6px; font-size: 16.5px; line-height: 1.45; }
.organ .form { font-size: 13.5px; color: var(--faded); margin: 0; font-style: italic; }
sup.cite { font-size: 11.5px; line-height: 0; margin-left: 2px; }
sup.cite a { color: var(--accent); text-decoration: none; }

/* meaning associations: the map has fixed directions */
.assoc-map { margin: 0 0 32px; padding: 6px 4px 4px; border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule-dark); }
svg.map { width: 100%; height: auto; display: block; }
svg.map a { text-decoration: none; }
@media (max-width: 720px) { .assoc-map { overflow-x: auto; } svg.map { min-width: 700px; } }
svg.map .edge { fill: none; stroke-width: 1.3; stroke-linecap: round; }
svg.map .edge.lineage { stroke: var(--ink); }
svg.map .edge.member { stroke: var(--ink); stroke-dasharray: 1 5; stroke-width: 2; }
svg.map .edge.food { stroke: var(--accent); }
svg.map .edge.mutual { stroke: var(--verdigris); stroke-dasharray: 6 5; }
svg.map .arrowhead { fill: var(--ink); }
svg.map .edge-label { font: italic 14px var(--body); text-anchor: middle; fill: var(--faded);
  paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; }
svg.map .edge-label.food { fill: var(--accent); }
svg.map .edge-label.mutual { fill: var(--verdigris); }
svg.map .zone { font: 14px var(--sc); letter-spacing: .1em; fill: var(--faded); text-anchor: middle; }
svg.map .vignette { fill: var(--paper-light); }
svg.map .ring { fill: none; stroke: var(--rule-dark); stroke-width: 1; }
svg.map .ring.centre { stroke: var(--ink); stroke-width: 1.6; }
svg.map .node-name { font: 18px var(--display); text-anchor: middle; fill: var(--ink); }
svg.map .node-species { font: italic 13px var(--body); text-anchor: middle; fill: var(--faded); }
svg.map a:hover .ring { stroke: var(--accent); stroke-width: 2; }
.legend { font: italic 14px var(--body); color: var(--faded); margin: 2px 8px 6px; text-align: center; }
.legend .k { display: inline-block; width: 24px; height: 0; border-top: 1.5px solid var(--ink); margin: 0 6px 4px 16px; }
.legend .k.member { border-top: 2px dotted var(--ink); }
.legend .k.food { border-color: var(--accent); }
.legend .k.mutual { border-top: 1.5px dashed var(--verdigris); }
.assoc { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px 44px; }
.block h3 { font: normal 17px var(--sc); letter-spacing: .06em; margin: 0 0 10px; padding-bottom: 4px; border-bottom: 1px dotted var(--rule); }
.block p, .block li { font-size: 16.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-bottom: 10px; }
a.chip-being { display: flex; gap: 12px; align-items: center; text-decoration: none; min-width: 0; }
a.chip-being img { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; border: 1px solid var(--rule-dark);
  background: var(--paper-light); flex: none; mix-blend-mode: multiply; }
a.chip-being span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
a.chip-being b { font: normal 21px var(--display); }
a.chip-being i { color: var(--faded); font-size: 14px; }
a.chip-being small { color: var(--accent); font: italic 14px var(--display); margin-top: 2px; }
ul.edges, ul.genes, ul.echoes { list-style: none; padding: 0; margin: 0; }
ul.edges li { margin-bottom: 12px; }
.reading { color: var(--faded); font-size: 15px; font-style: italic; }
ul.genes li { margin-bottom: 5px; }
.gene { display: inline-block; font: italic 16px var(--display); color: var(--verdigris); border-bottom: 1px solid var(--verdigris); margin-right: 8px; }
ul.echoes li { padding-left: 18px; text-indent: -18px; margin-bottom: 5px; }
ul.echoes li::before { content: "❧ "; color: var(--accent); font-size: 13px; }
ol.predicts { padding-left: 22px; margin: 0; }
ol.predicts li { margin-bottom: 8px; font-size: 16.5px; }
ol.predicts li::marker { font-family: var(--display); color: var(--accent); }

/* fruits */
.fruits { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.fruit { background: var(--paper-light); padding: 16px 18px; border: 1px solid var(--rule); box-shadow: 1px 2px 5px rgba(70, 50, 20, .10); }
.fruit .kind { margin: 0; font: 14px var(--sc); letter-spacing: .08em; color: var(--accent); }
.fruit .kind::before { content: "✣ "; }
.fruit h3 { font: normal 23px/1.2 var(--display); margin: 4px 0 8px; }
.fruit p { font-size: 16px; margin: 0 0 10px; }
.fruit .carries { font: italic 16.5px var(--display); color: var(--faded); border-top: 1px dotted var(--rule-dark); padding-top: 8px; margin: 0; }

/* record */
details { border-top: 1px solid var(--rule); padding: 12px 0; }
details summary { cursor: pointer; font: 17px var(--sc); letter-spacing: .05em; color: var(--faded); }
details summary::marker { color: var(--accent); }
details[open] summary { margin-bottom: 12px; }
details p, details li { font-size: 16px; }
.attempt { margin: 18px 0; }
.sterile { color: var(--accent); font-style: italic; }
.muted { color: var(--faded); font-size: 14px; font-style: italic; }
table { border-collapse: collapse; width: 100%; font-size: 15px; margin-top: 6px; }
th { text-align: left; font: 13px var(--sc); letter-spacing: .05em; color: var(--faded); border-bottom: 1px solid var(--rule-dark); padding: 4px 10px 4px 0; }
td { border-bottom: 1px dotted var(--rule); padding: 5px 10px 5px 0; vertical-align: top; }
tr.kept td { color: var(--accent); }
td.note { color: var(--faded); font-size: 14px; font-style: italic; }
.bred table, .drawn table { display: block; overflow-x: auto; }
ol.sources { font-size: 15px; color: var(--faded); padding-left: 24px; max-width: 80ch; margin: 0 auto; }
.empty { color: var(--faded); font-style: italic; }
.colophon { text-align: center; color: var(--accent); font-size: 24px; margin-top: 64px; }

/* index */
header.entry.title h1::after { margin-top: 14px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 30px 26px; }
a.card { display: flex; flex-direction: column; text-decoration: none; position: relative; padding: 10px 10px 12px;
  border: 1px solid var(--rule); background: rgba(243, 234, 213, .5); }
a.card:hover { border-color: var(--rule-dark); }
a.card img { width: 100%; aspect-ratio: 1; object-fit: contain; margin-bottom: 8px; }
a.card b { font: normal 23px var(--display); }
a.card i { color: var(--faded); font-size: 15px; }
a.card small { color: var(--faded); font-size: 13.5px; margin-top: 3px; font-style: italic; }
a.card .no { position: absolute; top: 8px; left: 10px; font: 13px var(--sc); color: var(--faded); }

/* the tree of semantic embodiment */
.intro { max-width: 72ch; margin: -6px auto 22px; text-align: center; color: var(--faded); font-style: italic; }
/* a fixed height: if the panel grew with each definition it would push the tree away from
   the pointer, which would leave the branch and shrink the panel again, a jitter */
.tree-info { position: sticky; top: 0; z-index: 2; height: 172px; overflow-y: auto; padding: 12px 18px; margin: 0 0 8px;
  background: var(--paper-light); border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule-dark);
  box-shadow: 0 6px 10px -8px rgba(70, 50, 20, .35); }
.tree-info h3 { margin: 0 0 4px; font: normal 24px var(--display); }
.tree-info h3 .rel { font-size: 13px; margin-left: 8px; }
.tree-info p { margin: 0 0 6px; font-size: 16px; }
.keyq { font: italic 18px/1.35 var(--display); color: var(--ink); }
.tree-wrap { overflow-x: auto; }
svg.tree { width: 100%; min-width: 880px; height: auto; display: block; }
svg.tree a { text-decoration: none; }
svg.tree .limb { fill: none; stroke: var(--ink); stroke-linecap: round; opacity: .55; transition: opacity .15s, stroke .15s; }
svg.tree .limb.lit { stroke: var(--accent); opacity: 1; }
svg.tree .col-head { font: 13px var(--sc); letter-spacing: .1em; fill: var(--faded); text-anchor: middle; }
svg.tree .dot { fill: var(--ink); }
svg.tree .tnode { cursor: pointer; }
svg.tree .hit { fill: transparent; }
svg.tree .tnode.lit .dot { fill: var(--accent); }
svg.tree .node-label { text-anchor: end; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; }
svg.tree .node-label.root { font: 17px var(--sc); letter-spacing: .04em; }
svg.tree .node-label.root { text-anchor: start; }
svg.tree .node-label.group { font: 17px var(--sc); letter-spacing: .04em; }
svg.tree .node-label.kind { font: 19px var(--display); }
svg.tree .node-label.phylum { font: 16px var(--display); }
svg.tree .node-label.class { font: italic 15px var(--body); fill: var(--faded); }
svg.tree .tnode.lit .node-label { fill: var(--accent); }
svg.tree .vignette { fill: var(--paper-light); }
svg.tree .ring { fill: none; stroke: var(--rule-dark); }
svg.tree .tnode.lit .ring, svg.tree a:hover .ring { stroke: var(--accent); stroke-width: 2; }
svg.tree .leaf-name { font: 17px var(--display); fill: var(--ink); }
svg.tree .leaf-name .bred { fill: var(--verdigris); font-size: 13px; }
svg.tree .leaf-meta { font: italic 13px var(--body); fill: var(--faded); }

/* key an idea */
.key { background: var(--paper-light); border: 3px double var(--rule-dark); padding: 18px 22px; min-height: 220px; }
.key-step { font: 14px var(--sc); letter-spacing: .06em; color: var(--accent); margin: 0 0 8px; }
.key-q { font: 26px/1.3 var(--display); margin: 0 0 16px; }
.key-so { font: italic 17px var(--display); color: var(--verdigris); margin: 0 0 12px; }
.key button { font: 17px var(--body); color: var(--ink); background: transparent; border: 1px solid var(--rule-dark);
  padding: 6px 16px; cursor: pointer; }
.key button:hover { border-color: var(--accent); color: var(--accent); }
.key-yn { display: flex; gap: 12px; }
.key-yn button { font: 19px var(--display); min-width: 110px; }
.key-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.key-options button { text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; }
.key-options b { font: normal 19px var(--display); }
.key-options span { font-size: 14.5px; color: var(--faded); font-style: italic; line-height: 1.3; }
.key-found { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 6px 0 12px; }
.key-nav { display: flex; gap: 10px; margin-top: 16px; border-top: 1px dotted var(--rule); padding-top: 12px; }
.key-nav button { font-size: 15px; padding: 4px 12px; }

/* the table of kinds and phyla */
.filters { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin-bottom: 16px; }
.filter { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.filters button { font: 14.5px var(--body); background: transparent; color: var(--faded); border: 1px solid var(--rule);
  padding: 1px 9px; cursor: pointer; }
.filters button.on { background: var(--accent); border-color: var(--accent); color: var(--paper-light); }
.filters .clear { font-style: italic; border-style: dashed; }
.table-wrap { overflow-x: auto; }
table.grid { table-layout: fixed; min-width: 980px; border-collapse: collapse; }
table.grid th, table.grid td { border: 1px solid var(--rule); padding: 6px; vertical-align: top; }
table.grid thead th { font: 15px var(--display); letter-spacing: 0; color: var(--ink); text-align: center; }
table.grid thead th a, table.grid tbody th a { text-decoration: none; }
table.grid tbody th { width: 128px; text-align: left; font: 17px var(--display); letter-spacing: 0; color: var(--ink); }
table.grid tbody th small { display: block; font: italic 13px var(--body); color: var(--faded); }
table.grid td.count { text-align: center; font: italic 15px var(--display); color: var(--faded); }
.unbred { display: block; text-align: center; color: var(--rule-dark); font-size: 20px; }
a.cell-being { display: flex; align-items: center; gap: 6px; text-decoration: none; margin: 2px 0; transition: opacity .15s; }
a.cell-being img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid var(--rule); flex: none; }
a.cell-being span { font: 14.5px/1.15 var(--display); }
a.cell-being.dim { opacity: .14; }

/* the ranks, defined */
.ranks { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.rank { padding: 12px 14px; border-top: 1px solid var(--rule-dark); scroll-margin-top: 150px; }
.rank:target { background: var(--paper-light); box-shadow: inset 0 3px 0 var(--accent); }
.rank .kind { margin: 0; font: 13px var(--sc); letter-spacing: .06em; color: var(--accent); }
.rank h3 { margin: 2px 0 4px; font: normal 23px var(--display); }
.rank p { font-size: 15.5px; margin: 0 0 6px; }
.rank .keyq { font-size: 16.5px; }
.rank .who { color: var(--faded); }
dl.label dd a { text-decoration-color: var(--rule); }

/* the gallery and the rules-only view (laws §11) */
.views { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: center; margin: 40px 0 -40px; }
.views button { font: 15px var(--sc); letter-spacing: .05em; background: transparent; color: var(--faded); border: 1px solid var(--rule-dark); padding: 3px 14px; cursor: pointer; }
.views button.on { background: var(--ink); color: var(--paper-light); border-color: var(--ink); }
.views-note { flex-basis: 100%; text-align: center; font: italic 14px var(--body); color: var(--faded); }
.mark.kept { color: var(--verdigris); }
.mark.stale-mark { color: var(--faded); }
img.undrawn { opacity: .08; }
.rules-row.chosen .rules-no { color: var(--accent); }
.organ img.undrawn + figcaption .fig::after { content: " · being redrawn under the current laws"; color: var(--accent); }
.debt { text-align: center; font: italic 15px var(--body); color: var(--faded); max-width: 70ch; margin: 18px auto 0; }

/* the codex as the rules draw it (laws §11) */
.rules-being { margin: 46px 0 8px; border-top: 1px solid var(--rule-dark); padding-top: 14px; }
.rules-being h3 { font: 500 26px var(--body); margin: 0 0 6px; }
.rules-being h3 a { color: var(--ink); text-decoration: none; }
.rules-being h3 .rel { font-size: 15px; margin-left: 8px; }
.rules-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 12px 0 4px; }
.rules-no { flex-basis: 100%; margin: 6px 0 0; font: 15px var(--sc); letter-spacing: .05em; color: var(--faded); }
.rules-no span { font: italic 15px var(--body); letter-spacing: 0; margin-left: 10px; color: var(--ink); }
.rules-cell { display: flex; flex-direction: column; align-items: center; width: 112px; color: var(--faded); text-decoration: none; font: 13px var(--sc); }
.rules-cell img { width: 112px; height: 112px; object-fit: contain; }
.rules-cell.rules-whole { width: 190px; }
.rules-cell.rules-whole img { width: 190px; height: 190px; }
.undrawn-cell { justify-content: center; height: 112px; border: 1px dashed var(--rule-dark); }
.undrawn-cell.rules-whole { height: 190px; }
@media (max-width: 640px) {
  .rules-cell { width: calc(33% - 8px); }
  .rules-cell img { width: 100%; height: auto; }
  .rules-cell.rules-whole, .rules-cell.rules-whole img { width: 100%; height: auto; }
}

/* the morphospace (laws §8) */
.morpho { position: relative; }
.mx-controls { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; margin: 26px 0 0; }
.seg { display: inline-flex; align-items: stretch; border: 1px solid var(--rule-dark); background: var(--paper-light); }
.seg > span { font: 14px var(--sc); color: var(--faded); padding: 5px 10px; letter-spacing: .05em; align-self: center; }
.seg button { font: 15px var(--body); background: transparent; color: var(--ink); border: 0; border-left: 1px solid var(--rule); padding: 5px 14px; cursor: pointer; min-height: 36px; }
.seg button.on { background: var(--ink); color: var(--paper-light); }
.mx-pick { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: center; margin: 6px 0 4px; }
.mx-pick label { font: 15px var(--sc); color: var(--faded); display: inline-flex; gap: 8px; align-items: center; letter-spacing: .04em; }
.mx-pick select { font: 16px var(--body); color: var(--ink); background: var(--paper-light); border: 1px solid var(--rule-dark); padding: 4px 8px; min-height: 36px; max-width: 64vw; }
#swap { font: 17px var(--body); background: var(--paper-light); border: 1px solid var(--rule-dark); color: var(--ink); width: 38px; height: 36px; cursor: pointer; }
.mx-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: center; font: 14.5px var(--body); color: var(--faded); margin: 8px 0 12px; }
.mx-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.sw.faint { background: var(--rule-dark); opacity: .35; }
.sw.lead { border: 3px solid var(--ink); width: 8px; height: 8px; }
.sw.ring { border: 1.5px solid var(--ink); width: 11px; height: 11px; }
.sw.ring.sq { border-radius: 2px; }
.mx-planewrap { overflow: auto; max-height: 80vh; border: 3px double var(--rule-dark); background: var(--paper-light); }
.mx-plane { border-collapse: separate; border-spacing: 0; min-width: 100%; }
.mx-plane th, .mx-plane td { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); vertical-align: top; padding: 6px; }
.mx-plane .corner { text-align: left; font: 13px var(--sc); color: var(--faded); white-space: nowrap; position: sticky; top: 0; left: 0; z-index: 3; background: var(--paper-light); }
.mx-plane .corner b, .mx-plane .corner span { display: block; font-weight: normal; }
.mx-plane .colh { font: 15px var(--body); text-align: center; min-width: 136px; position: sticky; top: 0; z-index: 2; background: var(--paper-light); }
.mx-plane .colh b { display: block; font-weight: 500; }
.mx-plane .colh small { color: var(--faded); font-size: 12.5px; }
.mx-plane .rowh { font: 15px var(--body); text-align: right; white-space: nowrap; position: sticky; left: 0; z-index: 1; background: var(--paper-light); }
.mx-plane .rowh b { font-weight: 500; }
.mx-plane.one-row .corner span { display: none; }
.mx-plane.one-row .rowh { padding: 0; }
.mx-plane td { min-width: 136px; text-align: center; }
.mthumb { display: inline-block; width: 60px; height: 60px; margin: 2px; border: 2px solid var(--rule-dark); border-radius: 50%; background: var(--paper-light); overflow: hidden; vertical-align: top; }
.mthumb.persists { border-radius: 7px; }
.mthumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mthumb.lead { border-width: 3.5px; }
.mthumb.latent { opacity: .38; filter: grayscale(.7); }
.mthumb.undrawn { border-style: solid; opacity: .4; }
.mthumb:hover, .mthumb:focus-visible { opacity: 1; filter: none; outline: 2px solid var(--ink); outline-offset: 1px; }
.mx-unused { margin: 8px 0 0; font-size: 15px; }
.mguide { margin: 18px 0 34px; }
.mguide h3 { font: 500 27px var(--body); margin: 0 0 4px; }
.mguide h3 .rel { font-size: 14.5px; margin-left: 10px; }
.mguide .about { font-size: 18px; margin: 4px 0; }
.mguide .note { font: italic 15.5px var(--body); color: var(--faded); margin: 4px 0 12px; }
.gcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.gcard { background: var(--paper-light); border: 1px solid var(--rule); padding: 9px 11px; display: flex; flex-direction: column; gap: 4px; }
.gcard.none { opacity: .55; }
.gcard b { font: 500 17px var(--body); }
.gcard q { font: italic 15px/1.35 var(--body); color: var(--ink); }
.gcard .tags, .gcard .count { font: 13px var(--body); color: var(--faded); }
.gex { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
.gex .mthumb { width: 52px; height: 52px; }
.mlayer { margin: 16px 0; }
.mlayer h3 { font: 500 21px var(--body); margin: 0 0 6px; }
.mlayer h3 .rel { font-size: 14px; margin-left: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: 15px var(--body); background: var(--paper-light); border: 1px solid var(--rule-dark); color: var(--ink); padding: 4px 10px; cursor: pointer; display: inline-flex; flex-direction: column; align-items: flex-start; text-align: left; min-height: 38px; }
.chip small { font-size: 12px; color: var(--faded); }
.chip.on { background: var(--ink); color: var(--paper-light); }
.chip.on small { color: var(--rule); }
.chip:disabled { opacity: .4; cursor: default; }
.mlayers { justify-content: center; margin: 8px 0 4px; }
.mlayers .chip { flex-direction: row; gap: 6px; align-items: center; }
.mlayers input { margin: 0; accent-color: var(--accent); }
#likeness-note { text-align: center; }
.mmap { width: 100%; height: auto; display: block; background: var(--paper-light); border: 3px double var(--rule-dark); }
.mmap .edgel { font: italic 16px var(--body); fill: var(--faded); }
.mmap .tie { stroke-width: 1; opacity: .5; }
.mmap .leader { stroke: var(--faded); stroke-width: 1; opacity: .7; }
.mmap .lead text { font: 15px var(--sc); fill: var(--ink); letter-spacing: .03em; paint-order: stroke; stroke: var(--paper-light); stroke-width: 4px; stroke-linejoin: round; }
.mmap .lead:focus { outline: none; }
.mmap .lead:focus-visible circle, .mmap .lead:focus-visible rect { stroke-width: 4; }
.mmap .hit { fill: transparent; cursor: pointer; }
.mtip { position: absolute; display: none; z-index: 5; max-width: 280px; background: var(--paper-light); border: 1px solid var(--rule-dark); padding: 8px 10px; box-shadow: 0 2px 8px rgba(47, 35, 23, .18); font: 14px/1.35 var(--body); pointer-events: none; }
.mtip img { width: 120px; height: 120px; object-fit: contain; display: block; margin: 0 auto 4px; }
.mtip b { display: block; font-size: 16px; font-weight: 500; }
.mtip span { display: block; color: var(--faded); }
.mtip i { display: block; margin-top: 3px; }
@media (max-width: 640px) {
  .mthumb { width: 48px; height: 48px; }
  .mx-plane .colh, .mx-plane td { min-width: 84px; }
  .mmap .lead text { font-size: 17px; }
  .mmap .edgel { font-size: 19px; }
}

/* the front page: the codex as one cabinet (laws §4) */
header.front { text-align: center; margin: 18px auto 0; max-width: 860px; }
header.front .kind { margin: 0; font: italic 16px var(--display); color: var(--accent); }
header.front h1 { font: normal clamp(38px, 6vw, 56px)/1.05 var(--display); margin: 4px 0 6px; letter-spacing: .01em; }
header.front .lede { color: var(--faded); font: italic 16.5px/1.45 var(--body); max-width: 72ch; margin: 0 auto; }
.cabinet { display: grid; grid-template-columns: 112px 1fr 1fr; margin: 16px -12px 0; border: 3px double var(--rule-dark); background: var(--paper-light); }
.cabinet > div { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 8px; }
.cabinet > div:nth-child(3n) { border-right: 0; }
.cab-col { text-align: center; }
.cab-col b, .cab-row b { display: block; font: 18px var(--sc); letter-spacing: .05em; }
.cab-col small, .cab-row small { display: block; font: italic 13.5px/1.3 var(--body); color: var(--faded); }
.cab-row { text-align: right; }
.cab-row .sw { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-bottom: 4px; }
.cab-cell { display: flex; flex-wrap: wrap; gap: 4px 12px; align-content: flex-start; }
.drawer h3 { font: 500 17px var(--body); margin: 0 0 4px; }
.drawer h3 a { text-decoration: none; }
.drawer h3 .rel { font-size: 13px; margin-left: 4px; }
.drawer .empty { font: italic 14px var(--body); color: var(--faded); margin: 2px 0 6px; }
.minis { display: flex; flex-wrap: wrap; gap: 4px; }
.mini { width: 74px; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: var(--ink); }
.mini img { width: 68px; height: 68px; object-fit: contain; }
.mini b { font: 500 13px/1.15 var(--body); margin-top: 1px; }
.mini small { font: 11.5px var(--sc); color: var(--accent); letter-spacing: .05em; }
.mini:hover b { color: var(--accent); }
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 0; }
/* the tree the cabinet is sorted by: the codex's own, or an older one; the beings regroup, never redraw */
.trees { display: flex; flex-wrap: wrap; gap: 6px 8px; justify-content: center; align-items: center; margin: 16px 0 0; }
.trees > span { font: 15px var(--sc); letter-spacing: .05em; color: var(--faded); margin-right: 2px; }
.trees button { font: 15px var(--sc); letter-spacing: .05em; background: transparent; color: var(--faded); border: 1px solid var(--rule-dark); padding: 3px 12px; cursor: pointer; }
.trees button:hover { color: var(--ink); }
.trees button.on { background: var(--ink); color: var(--paper-light); border-color: var(--ink); }
.tree-note { text-align: center; font: italic 15.5px/1.4 var(--body); color: var(--faded); max-width: 76ch; margin: 8px auto 0; }
.tree-note a { white-space: nowrap; }
/* a view of a tree not chosen stays hidden, whatever its own display */
[data-tree][hidden] { display: none !important; }
.cabinet.tree { grid-template-columns: 150px 1fr; }
.cabinet.tree > div { border-right: 1px solid var(--rule); }
.cabinet.tree > div:nth-child(2n) { border-right: 0; }
.cabinet.tree .cab-row b { font-size: 16.5px; }
.cab-rest { flex-basis: 100%; font: italic 13.5px/1.35 var(--body); color: var(--faded); margin: 2px 0 0; }
.ways a { display: block; text-decoration: none; border: 1px solid var(--rule-dark); background: var(--paper-light); padding: 10px 14px; }
.ways b { display: block; font: 19px var(--sc); letter-spacing: .04em; color: var(--accent); }
.ways span { font: italic 15px var(--body); color: var(--faded); }
@media (max-width: 760px) {
  .cabinet, .cabinet.tree { grid-template-columns: 1fr; margin: 16px 0 0; }
  .cabinet > div, .cabinet.tree > div { border-right: 0; }
  .cab-corner, .cab-col { display: none; }
  .cab-row { text-align: left; background: var(--paper); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .cab-row b, .cab-row small { display: inline; }
  .cab-row .sw { margin: 0; }
  .cab-cell::before { content: attr(data-col); display: block; width: 100%; font: 14px var(--sc); color: var(--faded); letter-spacing: .05em; }
  .ways { grid-template-columns: 1fr; }
}

/* a being's place in the older trees, beneath its label */
.other-trees { text-align: center; font: italic 15px/1.5 var(--body); color: var(--faded); margin: -32px auto 40px; max-width: 90ch; }
.other-trees a { font-style: normal; }
.mini .noplate { width: 68px; height: 68px; border: 1px dashed var(--rule); border-radius: 50%; }

/* the front's head and controls: the sections in the bar, the title, then what the cabinet is sorted by and
   which beings it shows */
header.front .count { font: 14px var(--sc); letter-spacing: .08em; color: var(--faded); margin: 10px 0 0; }
.controls { display: grid; grid-template-columns: max-content auto; gap: 10px 14px; align-items: center; width: max-content;
  max-width: 100%; margin: 22px auto 0; padding: 12px 20px; border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule-dark); }
.ctl { display: contents; }
.ctl-name { font: 15px var(--sc); letter-spacing: .06em; color: var(--faded); text-align: right; }
.ctl .opts { display: flex; flex-wrap: wrap; gap: 6px; }
.ctl button { font: 15px var(--sc); letter-spacing: .04em; background: transparent; color: var(--faded); border: 1px solid var(--rule-dark);
  padding: 4px 13px; cursor: pointer; border-radius: 2px; }
.ctl button i { font: italic 14px var(--body); margin-left: 3px; }
.ctl button:hover { color: var(--ink); border-color: var(--ink); }
.ctl button.on { background: var(--ink); color: var(--paper-light); border-color: var(--ink); }
.legend { text-align: center; max-width: 74ch; margin: 12px auto 0; font: italic 15px/1.45 var(--body); color: var(--faded); }
.legend p { margin: 2px 0; }
.legend b { font: normal 15px var(--sc); letter-spacing: .05em; color: var(--ink); }
.legend a { white-space: nowrap; }
.legend[hidden], .mini[hidden], .drawer[hidden], .cab-cell[hidden], .cab-row[hidden] { display: none; }
/* the cabinet's drawings, larger */
.cabinet .minis { gap: 8px 6px; }
.cabinet .mini { width: 104px; }
.cabinet .mini img, .cabinet .mini .noplate { width: 96px; height: 96px; }
.cabinet .mini b { font-size: 14px; }
.ways { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) {
  .controls { grid-template-columns: 1fr; width: auto; gap: 4px; padding: 10px 0; }
  .ctl-name { text-align: left; margin-top: 4px; }
  .cabinet .mini { width: 96px; }
  .cabinet .mini img, .cabinet .mini .noplate { width: 86px; height: 86px; }
  .ways { grid-template-columns: 1fr; }
}

/* the menu, the same on every page: the codex's four places as tabs, each with what a reader does there */
nav.menu { display: grid; gap: 8px; }
nav.menu a { text-decoration: none; color: var(--ink); }
nav.menu .home { justify-self: start; font: 17px var(--sc); letter-spacing: .06em; color: var(--faded); }
nav.menu .home i { font-style: normal; color: var(--accent); }
nav.menu .home:hover { color: var(--accent); }
nav.menu ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none;
  border: 1px solid var(--rule-dark); background: rgba(243, 234, 213, .55); box-shadow: 0 2px 0 -1px var(--rule); }
nav.menu li + li { border-left: 1px solid var(--rule); }
nav.menu li a { display: block; height: 100%; padding: 9px 16px 10px; transition: background .15s; }
nav.menu li b { display: block; font: normal 16px/1.2 var(--sc); letter-spacing: .05em; }
nav.menu li span { display: block; margin-top: 2px; font: italic 14px/1.3 var(--body); color: var(--faded); }
nav.menu li a:hover, nav.menu li a:focus-visible { background: var(--paper-light); }
nav.menu li a:hover b, nav.menu li a:focus-visible b { color: var(--accent); }
nav.menu li a[aria-current] { background: var(--paper-light); box-shadow: inset 0 3px 0 var(--accent); }
nav.menu li a[aria-current] b { color: var(--accent); }
nav.menu li a.in { box-shadow: inset 0 3px 0 var(--rule-dark); }
nav.top.local { margin-top: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); box-shadow: none; }
@media (max-width: 760px) {
  nav.menu ul { grid-template-columns: 1fr 1fr; }
  nav.menu li + li { border-left: 0; }
  nav.menu li:nth-child(even) { border-left: 1px solid var(--rule); }
  nav.menu li:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  nav.menu li a { padding: 8px 10px 9px; }
  nav.menu li b { font-size: 15px; }
  nav.menu li span { font-size: 13px; }
}


/* ---------------------------------------------------------------- the phone: the tree walked a branch at a time */
.on-narrow, .tree-walk { display: none; }
@media (max-width: 760px) {
  .on-wide { display: none; }
  .on-narrow { display: inline; }
  .tree-section .tree-wrap, .tree-section .tree-info { display: none !important; }
  .tree-walk { display: block; scroll-margin-top: 0; }
}
.tree-walk .crumbs { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px;
  padding: 8px 0 6px; background: var(--paper); border-bottom: 1px solid var(--rule-dark); font: 14px var(--sc); letter-spacing: .04em; }
.tree-walk .crumbs button { border: 0; background: none; padding: 6px 2px; font: inherit; color: var(--accent); cursor: pointer; }
.tree-walk .crumbs button[aria-current] { color: var(--ink); }
.tree-walk .crumbs span { color: var(--faded); }
.tree-walk .wdef { margin: 12px 0 14px; padding: 12px 14px; background: var(--paper-light); border: 3px double var(--rule-dark); }
.tree-walk .wdef h3 { margin: 0 0 4px; font: normal 22px var(--display); }
.tree-walk .wdef h3 .rel { font-size: 13px; margin-left: 6px; }
.tree-walk .wdef p { margin: 0 0 6px; font-size: 16px; }
.tree-walk .wcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wcard { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px 9px; text-align: center;
  border: 1px solid var(--rule-dark); border-radius: 8px; background: var(--paper-light); color: var(--ink); font: inherit;
  text-decoration: none; cursor: pointer; }
.wcard img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.wcard .wthumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 100%; }
.wcard .wthumbs:has(img:only-child) { grid-template-columns: 1fr; padding: 0 12%; }
.wcard b { margin-top: 6px; font: normal 18px/1.2 var(--display); }
.wcard small { color: var(--faded); font-size: 13px; font-style: italic; }
.wcard .bred { color: var(--accent); font-size: 14px; }
.wcard:active { border-color: var(--accent); }

/* ---------------------------------------------------------------- the phone: the morphospace read down the page, and walked */
.mx-planelist, .mx-hood { display: none; }
@media (max-width: 760px) {
  .mx-planewrap { display: none; }
  .mx-planelist, .mx-hood { display: block; }
  .mframe { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mframe .mmap { min-width: 880px; }
  .mtip { display: none !important; }
}
.mx-planelist { border: 3px double var(--rule-dark); background: var(--paper-light); padding: 8px 10px 2px; }
.mx-group h3 { margin: 10px 0 6px; padding-bottom: 2px; border-bottom: 1px solid var(--rule-dark); font: normal 21px var(--display); }
.mx-cell { margin: 0 0 10px; }
.mx-cell h4 { margin: 0 0 3px; font: normal 16px var(--sc); letter-spacing: .04em; }
.mx-cell h4 small { color: var(--faded); font: 13px var(--body); }
.mx-cell .mthumb { width: 66px; height: 66px; }
.mx-hood { margin: 8px 0 16px; scroll-margin-top: 8px; }
.hood-title { margin: 0 0 6px; font: 15px var(--sc); letter-spacing: .06em; color: var(--faded); }
.hood-here { display: flex; gap: 12px; align-items: center; padding: 10px; background: var(--paper-light); border: 3px double var(--rule-dark); }
.hood-img { flex: 0 0 auto; }
.hood-img img { width: 132px; height: 132px; object-fit: contain; display: block; }
.hood-text b { display: block; font: normal 26px/1.1 var(--display); }
.hood-text small { display: block; margin-top: 4px; color: var(--faded); font-style: italic; font-size: 14px; }
.hood-open { display: inline-block; margin-top: 8px; color: var(--accent); font-size: 15px; }
.hood-near { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.hood-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; text-align: center;
  border: 1px solid var(--rule-dark); border-radius: 8px; background: var(--paper-light); color: var(--ink); font: inherit; cursor: pointer; }
.hood-card img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.hood-card b { margin-top: 4px; font: normal 17px/1.2 var(--display); }
.hood-card small { color: var(--faded); font-size: 13px; font-style: italic; }
.hood-card:active { border-color: var(--accent); }
.hood-back { margin-top: 10px; padding: 8px 12px; border: 1px solid var(--rule-dark); border-radius: 6px; background: none;
  color: var(--accent); font: 15px var(--body); cursor: pointer; }
.mx-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 4px 6px; }
.mx-named { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mx-named small { font-size: 12px; line-height: 1.15; color: var(--ink); margin-top: 1px; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  nav.menu li:last-child:nth-child(odd) { grid-column: span 2; border-left: 0; }
}

/* ---------------------------------------------------------------- the territory */
.tpick { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; margin: 18px 0 6px; font: 15px var(--sc); letter-spacing: .04em; }
.tpick select { margin-left: 6px; font: 16px var(--body); padding: 4px 6px; border: 1px solid var(--rule-dark); background: var(--paper-light); color: var(--ink); }
.tlegend { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; font-size: 14px; color: var(--ink); margin: 0 0 8px; }
.tlegend i, .torg i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
.tframe { border: 3px double var(--rule-dark); background: var(--paper-light); }
.tmap { width: 100%; height: auto; display: block; }
.tmap .tdot { stroke: var(--paper-light); stroke-width: 2; transition: opacity .15s, r .15s; }
.tmap .thit { fill: transparent; cursor: pointer; }
.tmap .tring { fill: var(--paper-light); stroke: var(--rule-dark); stroke-width: 1.5; }
.tmap .tpic { cursor: pointer; transition: opacity .15s; }
.tmap .tlabel { font: 12px var(--sc); fill: var(--ink); letter-spacing: .03em; paint-order: stroke; stroke: var(--paper-light); stroke-width: 3px; opacity: 0; transition: opacity .15s; }
.tmap .tpic:hover .tlabel, .tmap .tpic:focus .tlabel, .tmap .tpic.on .tlabel { opacity: 1; }
.tmap.focus .tdot:not(.on) { opacity: .16; }
.tmap.focus .tpic:not(.on) { opacity: .28; }
.tmap .tdot.on { r: 7.5; }
.tmap .tpic.on .tring { stroke: var(--accent); stroke-width: 2.5; }
.tmap .tspoke { stroke-width: 1.2; opacity: .55; }
.tmap .tjoint { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 5 4; }
.tpanel { margin: 14px 0 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .tpanel { grid-template-columns: 1fr 1fr; } }
.tcard { padding: 12px 16px; background: var(--paper-light); border: 3px double var(--rule-dark); }
.tcard h3 { margin: 0 0 6px; font: normal 24px var(--display); }
.tcard h3 small { font: italic 15px var(--body); color: var(--faded); margin-left: 6px; }
.tcard p { margin: 0 0 8px; font-size: 16px; }
.tcard small { color: var(--faded); font-size: 13.5px; }
.tjoints { margin: 0 0 8px; padding-left: 18px; font-size: 15.5px; }
.tjoints li { margin-bottom: 4px; }
.tjoints .tw { color: var(--faded); font: 13px var(--sc); letter-spacing: .05em; margin: 0 3px; }
.tbreadth { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 18px; }
.tbreadth button { display: grid; grid-template-columns: 34px 1fr auto; grid-template-rows: auto 6px; column-gap: 8px; align-items: center;
  padding: 4px 6px; border: 0; border-bottom: 1px solid var(--rule); background: none; color: var(--ink); font: 15px var(--body); text-align: left; cursor: pointer; }
.tbreadth img { grid-row: span 2; width: 34px; height: 34px; object-fit: contain; }
.tbreadth i { grid-column: 2 / 4; height: 4px; background: var(--rule-dark); border-radius: 0 4px 4px 0; }
.tbreadth small { color: var(--faded); }
.tbreadth button:hover span { color: var(--accent); }
.treading p { font-size: 16.5px; }
.tcheck { border-collapse: collapse; margin: 6px 0 14px; font-size: 15px; }
.tcheck th, .tcheck td { padding: 4px 12px; border-bottom: 1px solid var(--rule); text-align: left; }
.tcheck th { font: normal 13px var(--sc); letter-spacing: .05em; color: var(--faded); }
.tcheck small { color: var(--faded); }
@media (max-width: 760px) {
  .tframe { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tframe .tmap { min-width: 760px; }
}