/* LifeStyle: a graph on purple. The lists of the markup (areas and the things under them) are the page where
   scripts do not run; where the graph is, they are hidden. */
.page-life { --gold: #E2A126; --mint: #86DCC9; }
.page-life main { max-width: 1320px; margin: 0 auto; padding-top: clamp(20px, 4vh, 40px); }
.tree { position: relative; --indent: 62px; }

/* the first drawing: every line is pulled from its start, the threads seep in last */
@keyframes ink { to { stroke-dashoffset: 0; } }
@keyframes seep { to { opacity: 1; } }

.lf-head { display: flex; align-items: center; gap: 14px; }
.lf-head .mark { width: 46px; height: 46px; flex: none; }
.lf-head h1 { font-size: clamp(34px, 4.4vw, 52px); font-weight: 800; letter-spacing: -0.02em; }
.lf-head p { align-self: flex-end; padding-bottom: 7px; font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.lf-intro { margin: 20px 0 0 var(--indent); max-width: 56ch; font-size: clamp(18px, 1.55vw, 21px); line-height: 1.45; }

.lf-body { margin-top: clamp(36px, 6vh, 60px); display: grid; grid-template-columns: minmax(0, 820px) minmax(210px, 270px); justify-content: space-between; column-gap: 110px; }
.branches { display: grid; gap: 52px; padding-left: var(--indent); }
.branch { display: grid; grid-template-columns: 196px minmax(0, 1fr); column-gap: 72px; align-items: center; }
.node { transition: opacity 0.18s; }
.bnode p { max-width: 34em; margin-top: 8px; font-size: 15.5px; line-height: 1.5; }
.bnode h2 { width: fit-content; padding: 0 2px 7px; border-bottom: 3px solid var(--ink); font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }
.leaves { display: grid; gap: 28px; }
.leaf h3 { padding-bottom: 7px; border-bottom: 2px solid var(--ink); font-size: 18.5px; font-weight: 700; }
.leaf > p, .hub > p { margin-top: 9px; font-size: 15.5px; line-height: 1.5; }
.leaf > p a:not(.tie):not(.out) { font-weight: 600; }

/* under a leaf: where it leads on the site, and what it is tied to */
.page-life .ties { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 13px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.out { display: inline-flex; align-items: center; gap: 7px; text-decoration-thickness: 1.5px; }
.glyph { flex: none; width: 17px; height: 17px; overflow: visible; fill: currentColor; }
.tie { display: inline-flex; align-items: baseline; gap: 6px; text-decoration: none; text-transform: none; letter-spacing: 0; font-size: 14px; }
.tie span { font-weight: 500; color: #D6CAC4; }
.tie::before { content: ''; align-self: center; width: 14px; border-top: 3px dotted currentColor; }
.tie:hover, .tie:focus-visible { text-decoration: underline; }
.tie-belgrade { color: var(--gold); }
.tie-assistant { color: var(--mint); }

/* the hubs stand in their own column; the threads come to the left end of their rules */
.hubs { display: grid; grid-template-rows: auto 1fr 1fr; gap: 28px; }
.hubs-head h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
/* the legend speaks of dotted lines: it is shown only where the script has drawn them */
.legend { display: none; }
.tree.threads .legend { display: block; }
.legend { margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: #D6CAC4; }
.hub { align-self: center; scroll-margin-top: 30vh; }
.hub h3 { padding-bottom: 7px; border-bottom: 3px solid currentColor; font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }
.hub-belgrade h3 { color: var(--gold); }
.hub-assistant h3 { color: var(--mint); }
.hub > p { color: var(--ink); }


/* ---------- the page: a graph held by forces (graph.js), from edge to edge of the window, with no frame and no
   text around it. The class on <html> is set before the first paint; without scripts the page is the lists. */
#graph-box { display: none; }
html.lf-graph .lf-body, html.lf-graph .lf-intro { display: none; }
/* The map takes the whole first screen, from the very top: nothing of it is cut off. The top line of the page and
   the title lie on the map; the pointer goes through them to the map, except on what can be pressed. */
html.lf-graph .page-life { position: relative; }
html.lf-graph .page-life main { max-width: none; padding: 0; }
html.lf-graph .page-life > .top { position: absolute; left: 0; right: 0; top: 0; z-index: 4; pointer-events: none; }
html.lf-graph .page-life > .top a { pointer-events: auto; }
html.lf-graph .lf-head { position: absolute; left: 0; right: 0; top: calc(max(12px, 2.5vh) + 14px + clamp(20px, 4.5vh, 48px)); z-index: 4; padding: 0 max(16px, 3vw); pointer-events: none; }
/* the words of the top stay readable when a node passes under them */
html.lf-graph .page-life > .top, html.lf-graph .lf-head h1, html.lf-graph .lf-head p { text-shadow: 0 0 3px var(--paper), 0 0 9px var(--paper), 0 0 16px var(--paper); }
html.lf-graph #graph-box { display: block; }
.graph-map { position: relative; }
#graph { display: block; width: 100%; height: max(440px, 100vh); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
@supports (height: 1dvh) { #graph { height: max(440px, 100dvh); } }
/* a phone: the head of the page takes two lines, the map takes what is left of the screen */
@media (max-width: 599px) {
  #graph { height: max(400px, 100vh); }
  @supports (height: 1dvh) { #graph { height: max(400px, 100dvh); } }
}
#graph.held { cursor: grabbing; }

/* links: the stronger the tie, the heavier the line; a loose association is dotted */
/* an area of the map: a soft shape behind the nodes that belong together; no words, no border */
.gareas { opacity: 0.075; pointer-events: none; }
.garea { fill: var(--ink); stroke: var(--ink); stroke-width: 84; stroke-linejoin: round; stroke-linecap: round; }
.gedge { stroke: var(--ink); stroke-linecap: round; pointer-events: none; transition: opacity 0.18s; }
.ge-3 { stroke-width: 2.6; }
.ge-2 { stroke-width: 1.5; opacity: 0.55; }
/* a loose association is drawn only while one of its two nodes is pointed at or chosen */
.ge-1 { display: none; stroke-width: 2.4; stroke-dasharray: 0.1 7; }
.ge-1.on { display: block; }
.gedge.on { stroke: #fff; opacity: 1; }
#graph-view { --k: 1; }
.gmean { display: none; fill: #fff; font-size: calc(11.5px / var(--k)); font-weight: 700; letter-spacing: 0.02em; paint-order: stroke; stroke: var(--paper); stroke-width: calc(5px / var(--k)); stroke-linejoin: round; pointer-events: none; }
.gmean.on { display: block; }

/* nodes: a circle in the colour of its area, its name under it */
.gnode { --c: var(--ink); cursor: pointer; outline: none; transition: opacity 0.18s; }
.gnode circle { fill: var(--c); stroke: var(--paper); stroke-width: 2; }
/* an area of his life is a colour: its own node and every thing that stands in it */
.gk-me circle { fill: var(--ink); stroke: var(--gold); stroke-width: 3.5; }
.gk-me .gpic polygon { fill: var(--gold); }
.gk-a0 { --c: #86DCC9; }
.gk-a1 { --c: #F286B4; }
.gk-a2 { --c: #F47F5B; }
.gk-a3 { --c: #B79CF5; }
.gk-a4 { --c: #E2A126; }
.gk-a5 { --c: #BFDD6E; }
.gk-a6 { --c: #7EC4F2; }
.gk-a7 { --c: #F1E9D8; }
.gk-a8 { --c: #9FB0CF; }
/* the node that is the area itself: a light ring around it, its name in capitals */
.gnode.ghub circle { stroke: var(--ink); stroke-width: 3; }
.gnode.ghub text { font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.gpic { pointer-events: none; }
.gpic polygon { fill: var(--paper); }
.gnode text { fill: var(--ink); font-size: calc(var(--fs, 13px) / var(--k)); font-weight: 600; paint-order: stroke; stroke: var(--paper); stroke-width: calc(5px / var(--k)); stroke-linejoin: round; }
/* from afar only the large nodes are named, closer the middle ones too, close up every one */
#graph:not(.near) .gnode:not(.big):not(.mid):not(.named) text { display: none; }
#graph.far .gnode.mid:not(.named) text { display: none; }
#graph.sizing .gnode text { display: block !important; }
.gnode.big text, .gnode.mid text { font-weight: 700; }
.gnode.on circle, .gnode:focus-visible circle { stroke: #fff; stroke-width: 4; stroke-dasharray: none; }
.gnode.dim, .gedge.dim { opacity: 0.16; }

.graph-keys { position: absolute; right: max(12px, 3vw); bottom: 14px; display: flex; gap: 8px; margin: 0; }
.graph-keys button { width: 40px; height: 40px; padding: 0; background: var(--paper); border: 2px solid var(--ink); border-radius: 50%; color: var(--ink); font: inherit; font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer; }
.graph-keys button:hover, .graph-keys button:focus-visible { background: var(--ink); color: var(--paper); }

/* what a node is: a small card that stands beside it while it is chosen */
#graph-pop { position: absolute; left: 8px; top: 8px; width: min(330px, calc(100% - 16px)); display: grid; gap: 9px; padding: 16px 18px 16px; background: #3A1F49; border: 1.5px solid rgba(241, 233, 216, 0.4); border-radius: 14px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35); }
#graph-pop[hidden] { display: none; }
#graph-pop.docked { left: 8px; right: 8px; top: auto; bottom: 62px; width: auto; max-height: 46%; overflow: auto; }
#graph-pop .gp-kind { --c: var(--ink); padding-right: 30px; color: var(--c); font-size: 12.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
#graph-pop h2 { padding-right: 30px; font-size: 21px; font-weight: 800; letter-spacing: -0.01em; }
#graph-pop .gp-text { font-size: 15.5px; line-height: 1.5; }
#graph-pop .gp-out { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14.5px; font-weight: 700; }
#graph-pop .gp-sub { margin-top: 2px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #D6CAC4; }
#graph-pop .gp-ties { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
#graph-pop .gp-ties button { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 0; background: none; border: 0; color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
#graph-pop .gp-ties b { font-weight: 700; text-decoration: underline; text-underline-offset: 0.18em; }
#graph-pop .gp-ties span { font-size: 13.5px; color: #D6CAC4; }
#graph-pop .gp-close { position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; padding: 0; background: none; border: 0; border-radius: 50%; color: var(--ink); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
#graph-pop .gp-close:hover, #graph-pop .gp-close:focus-visible { background: rgba(241, 233, 216, 0.16); }

/* narrower: the leaves hang under their branch */
@media (max-width: 1079px) {
  .lf-body { grid-template-columns: minmax(0, 1fr) minmax(180px, 220px); column-gap: 100px; }
  .branches { gap: 40px; }
  .branch { display: block; }
  .leaves { margin-top: 22px; padding-left: 40px; gap: 24px; }
}
/* a phone: one column, the hubs under the tree */
@media (max-width: 759px) {
  .tree { --indent: 42px; }
  .lf-head .mark { width: 40px; height: 40px; }
  .lf-head { gap: 10px; flex-wrap: wrap; }
  .lf-body { display: block; }
  .leaves { padding-left: 34px; }
  .hubs { margin-top: 56px; grid-template-rows: none; gap: 30px; }
  .hub { scroll-margin-top: 20vh; }
}