@font-face { font-family: "EB Garamond"; src: url(fonts/ebgaramond-roman.woff2) format("woff2"); font-style: normal; font-weight: 400 800; }
@font-face { font-family: "EB Garamond"; src: url(fonts/ebgaramond-italic.woff2) format("woff2"); font-style: italic; font-weight: 400 800; }
@font-face { font-family: "GFS Porson"; src: url(fonts/GFSPorson.otf) format("opentype"); }

:root {
  --ink: #221d17;
  --muted: #7a6f60;
  --paper: #faf6ec;
  --rule: #d9cfbb;
  --hymn: #f3ead6;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink);
  font-family: "EB Garamond", "GFS Porson", Georgia, serif; font-size: 17px; }
.grc, .greek { font-family: "GFS Porson", "EB Garamond", serif; }
body { display: flex; flex-direction: column; }
header { padding: .5rem 1rem .4rem; border-bottom: 1px solid var(--rule); display: flex; flex-wrap: wrap;
  align-items: baseline; gap: .4rem 1.5rem; }
h1 { margin: 0; font-weight: 500; font-size: 1.6rem; }
h1 small { font-size: .95rem; color: var(--muted); font-style: italic; font-weight: 400; margin-left: .4rem; }
#controls { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .9rem; }
#controls .group { display: flex; gap: .7rem; align-items: center; }
#controls input[type=search] { font: inherit; padding: .1rem .4rem; border: 1px solid var(--rule); background: #fff; width: 12rem; }
main { flex: 1; display: flex; min-height: 0; }
#chart { flex: 1; position: relative; min-width: 0; }
#graph { width: 100%; height: 100%; display: block; cursor: grab; }
#panel { width: 30rem; max-width: 42vw; border-left: 1px solid var(--rule); overflow-y: auto; padding: .8rem 1.1rem 2rem; }
#panel p { line-height: 1.4; margin: .5rem 0; }
.fine { font-size: .85rem; color: var(--muted); }

/* graph */
.link { stroke: #8c7f6c; stroke-opacity: .28; fill: none; }
.link.ded { stroke: var(--ink); stroke-opacity: .55; stroke-dasharray: 3 3; }
.node circle { stroke: var(--paper); stroke-width: 1; cursor: pointer; }
.node.hymn circle { fill: var(--hymn); stroke: var(--ink); stroke-width: 1.3; }
.node text { pointer-events: none; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round;
  font-family: "GFS Porson", "EB Garamond", serif; fill: var(--ink); }
.node.hymn text { stroke: none; font-family: "GFS Porson", "EB Garamond", serif; }
.node text.hide { display: none; }
svg.focus .link { stroke-opacity: .05; }
svg.focus .node { opacity: .15; }
svg.focus .node.lit { opacity: 1; }
svg.focus .link.lit { stroke-opacity: .7; stroke: var(--ink); }
svg.focus .node.lit text.hide { display: inline; }
.node.selected circle { stroke: var(--ink); stroke-width: 2.5; }

#legend { position: absolute; left: .8rem; bottom: .6rem; font-size: .85rem; background: rgba(250,246,236,.85);
  padding: .3rem .5rem; border: 1px solid var(--rule); }
#legend span { display: inline-flex; align-items: center; gap: .25rem; margin-right: .7rem; cursor: pointer; user-select: none; }
#legend span.off { opacity: .3; }
#legend i { width: .75rem; height: .75rem; border-radius: 50%; display: inline-block; }
#tip { position: absolute; pointer-events: none; background: #fffdf7; border: 1px solid var(--rule); padding: .3rem .5rem;
  font-size: .9rem; box-shadow: 0 1px 4px rgba(0,0,0,.12); max-width: 20rem; }
#tip .grc { font-size: 1.1rem; }

/* panel detail */
#detail h2 { font-weight: 500; margin: .2rem 0 0; font-size: 1.7rem; }
#detail h2 .en { font-family: "EB Garamond", serif; font-size: 1.1rem; color: var(--muted); font-style: italic; margin-left: .5rem; }
#detail .meta { color: var(--muted); font-size: .9rem; margin-bottom: .6rem; }
#detail h3 { font-weight: 500; font-size: 1.05rem; margin: 1rem 0 .2rem; border-bottom: 1px solid var(--rule); }
#detail h3 a { color: inherit; text-decoration: none; cursor: pointer; }
.cite { display: grid; grid-template-columns: 3.2rem 1fr; gap: 0 .5rem; margin: .15rem 0; }
.cite .ln { color: var(--muted); font-size: .85rem; text-align: right; padding-top: .15rem; font-variant-numeric: oldstyle-nums; }
.cite .gr { font-family: "GFS Porson", "EB Garamond", serif; font-size: 1.05rem; line-height: 1.35; }
.cite .en { grid-column: 2; font-size: .9rem; color: var(--muted); font-style: italic; margin: .1rem 0 .3rem; }
.cite .note { grid-column: 2; font-size: .8rem; color: var(--muted); }
.badge { font-size: .7rem; font-family: "EB Garamond", serif; border: 1px solid var(--rule); border-radius: 3px; padding: 0 .25rem;
  margin-left: .3rem; color: var(--muted); vertical-align: middle; }
mark { background: none; color: inherit; border-bottom: 2px solid currentColor; cursor: pointer; }
mark.self { font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: .4rem 0; }
.chip { cursor: pointer; font-family: "GFS Porson", "EB Garamond", serif; }
.chip sup { font-family: "EB Garamond", serif; color: var(--muted); font-size: .7rem; }
.text .cite { grid-template-columns: 2.2rem 1fr; }
.text .en, .cites .en { display: none; }
.with-en .en { display: block; }
.back { font-size: .85rem; cursor: pointer; color: var(--muted); }
button.link-btn { font: inherit; font-size: .85rem; background: none; border: 1px solid var(--rule); cursor: pointer; padding: 0 .4rem; }

/* coloured Greek text: a darker --<kind>-text where the fill is too light to read on the paper */
.k-god { color: var(--god-text, var(--god)); } .k-nymph { color: var(--nymph-text, var(--nymph)); }
.k-hero { color: var(--hero-text, var(--hero)); } .k-mortal { color: var(--mortal-text, var(--mortal)); }
.k-group { color: var(--group-text, var(--group)); } .k-creature { color: var(--creature-text, var(--creature)); }
.k-place { color: var(--place-text, var(--place)); }
#legend .routekey span { cursor: pointer; }
#legend .routekey span.off { opacity: .45; }
#legend .routekey span.off b { opacity: .5; }

nav.views { font-size: .95rem; }
nav.views a { color: var(--ink); }
nav.views b { font-weight: 600; }
.where { font-size: .88rem; color: var(--muted); margin: .25rem 0 .5rem; line-height: 1.35; }
.extlinks { margin: .3rem 0 .6rem; }
.extlinks a { margin-right: .8rem; font-size: .9rem; color: var(--ink); }