/* idtech: the id Tech family tree page (/quakeengine/). Ported from the design board's IdTech artboard.
   Colours: theme tokens where the site has them; the tree's own box colours are --qe-* below (exact board values on Kraken). */
.qe {
  --qe-spine: var(--accent);
  --qe-sp-bg: color-mix(in srgb, var(--accent) 4%, var(--bg-2));  --qe-sp-bd: var(--line);
  --qe-root-bg: color-mix(in srgb, var(--accent) 14%, var(--bg-2));
  --qe-n-bg: color-mix(in srgb, var(--accent) 7%, var(--bg-2));  --qe-n-bd: color-mix(in srgb, var(--accent) 22%, var(--line));  --qe-n-tx: color-mix(in srgb, var(--accent) 12%, var(--text));
  --qe-l-bg: var(--bg-3);  --qe-l-bd: var(--line-2);  --qe-l-tx: var(--text-3);
  --qe-g-tx: var(--text-3);  --qe-rail: color-mix(in srgb, var(--accent) 22%, var(--line));  --qe-bus: var(--dim);
  --qe-no: var(--text-6);  --qe-eng: var(--hilite);
  /* Valve / Source family and the Call of Duty line: each theme's own sky and pink, mixed into its own boxes and text */
  --qe-src-hue: var(--sky); --qe-cod-hue: var(--pink);
  --qe-src-bg: color-mix(in srgb, var(--qe-src-hue) 9%, var(--bg-2));  --qe-src-bd: color-mix(in srgb, var(--qe-src-hue) 45%, var(--line));
  --qe-src-tx: color-mix(in srgb, var(--qe-src-hue) 35%, var(--text));  --qe-src-g: color-mix(in srgb, var(--qe-src-hue) 55%, var(--text-3));
  --qe-src-lbg: color-mix(in srgb, var(--qe-src-hue) 6%, var(--bg-3));  --qe-src-lbd: color-mix(in srgb, var(--qe-src-hue) 28%, var(--line-2));
  --qe-cod-bg: color-mix(in srgb, var(--qe-cod-hue) 9%, var(--bg-2));  --qe-cod-bd: color-mix(in srgb, var(--qe-cod-hue) 40%, var(--line));
  --qe-cod-tx: color-mix(in srgb, var(--qe-cod-hue) 35%, var(--text));  --qe-cod-g: color-mix(in srgb, var(--qe-cod-hue) 45%, var(--text-3));
  --qe-cod-lbg: color-mix(in srgb, var(--qe-cod-hue) 6%, var(--bg-3));  --qe-cod-lbd: color-mix(in srgb, var(--qe-cod-hue) 25%, var(--line-2));
  /* hybrids (warm tag) and id assists (softer) */
  --qe-hy: var(--warm); --qe-hy-name: color-mix(in srgb, var(--warm) 45%, var(--text)); --qe-as: color-mix(in srgb, var(--warm) 35%, var(--text-3)); --qe-hy-note: var(--text-5);

  box-sizing: border-box; min-height: 100vh; padding: 64px 64px 56px; background: var(--bg); color: var(--text); overflow-x: hidden;
}
/* Kraken: the board's exact colours */
:root[data-theme="kraken"] .qe {
  --qe-sp-bg: #0e0d1a; --qe-root-bg: #1a1538; --qe-n-bg: #121022; --qe-n-bd: #3b3566; --qe-n-tx: #e3e0f7;
  --qe-l-bg: #0d0c17; --qe-l-bd: #262340; --qe-l-tx: #a6adc8; --qe-g-tx: #a6adc8; --qe-rail: #3a3566; --qe-bus: #45407a; --qe-no: #585b70;
  --qe-src-bg: #0d1528; --qe-src-bd: #3d5a80; --qe-src-tx: #cfe0ff; --qe-src-g: #a9c6ee; --qe-src-lbg: #0b1220; --qe-src-lbd: #2a4060;
  --qe-cod-bg: #150f26; --qe-cod-bd: #55468a; --qe-cod-tx: #e6dcff; --qe-cod-g: #bcb4d8; --qe-cod-lbg: #120f1f; --qe-cod-lbd: #3a3152;
  --qe-hy: #ffc29e; --qe-hy-name: #ffe0d2; --qe-as: #e2d1cb; --qe-hy-note: #8b8fa8;
  --qe-quake: #d8dcf0;   /* LIST view: Quake games (bold, dimmed white). Other themes use their body text colour. */
}
/* the peach themes: the Valve family in Half-Life orange (their sky blue mixed into the warm palette went grey-slate),
   with its engine names in pale orange so they still stand out inside it */
:root[data-theme="bea-peach"] .qe, :root[data-theme="hax"] .qe { --qe-src-hue: #ff8a2a; --qe-src-eng: #ffd2a8; --qe-src-eng-w: 600; }
/* the light theme: darker family colours so they read on white */
:root[data-theme="flashbang"] .qe {
  --qe-src-bg: #eef4fd; --qe-src-bd: #8fb0dc; --qe-src-tx: #1d3c66; --qe-src-g: #2f5288; --qe-src-lbg: #f3f7fd; --qe-src-lbd: #b5cbe8;
  --qe-cod-bg: #f4f0fd; --qe-cod-bd: #a596d6; --qe-cod-tx: #3b2a78; --qe-cod-g: #4f4380; --qe-cod-lbg: #f7f4fd; --qe-cod-lbd: #c7bce6;
  --qe-hy: #c2551f; --qe-hy-name: #8a3a12; --qe-as: #8a6a5e; --qe-hy-note: #6b6f86;
}
.qe *, .qe *::before, .qe *::after { box-sizing: border-box; }
.qe .acc { color: var(--accent); }

.qe-brand { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: -30px 0 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line-3); }
.qe-bl { --qe-logo: var(--tx-title, var(--text)); display: flex; align-items: center; gap: 12px; color: var(--qe-logo); font-family: "Big Shoulders Display", sans-serif; font-weight: 300; font-size: 20px; letter-spacing: .3em; }
.qe-bl b { font-weight: 300; color: var(--accent); }
.qe-bl:hover { color: var(--title); }
.qe-mark { display: block; width: 30px; height: 30px; background: var(--qe-logo); -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat; }
.qe-bb { display: table; margin: 0 0 26px auto; font-size: 12px; letter-spacing: .16em; color: var(--text-5); }
.qe-theme { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .2em; color: var(--text-5); }
.qe-bb:hover { color: var(--hilite); }

.qe-kick { font-size: 13px; letter-spacing: .24em; color: var(--text-5); }
.qe-hd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 720px); gap: 24px 64px; align-items: start; margin-top: 18px; }
.qe-ttl { margin: 0; font-family: "Big Shoulders Display", sans-serif; font-weight: 200; font-size: clamp(54px, 8.6vw, 132px); line-height: .9; letter-spacing: .04em; color: var(--text); }
.qe-sub { margin: 16px 0 0 4px; font-size: 22px; letter-spacing: .12em; color: var(--text-3); }
.qe-intro { margin: 8px 0 0; font-size: 15px; line-height: 24px; color: var(--text-3); }
.qe-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; font-size: 12px; }
.qe-legend span { padding: 4px 10px; border: 1px solid var(--line); }
.qe-legend .lg-source { border-color: var(--qe-src-bd); color: var(--qe-src-g); }
.qe-legend .lg-cod { border-color: var(--qe-cod-bd); color: var(--qe-cod-tx); }
.qe-legend .lg-engine { color: var(--qe-eng); }
.qe-legend .lg-hybrid { border-top: 2px solid var(--qe-hy); color: var(--qe-hy); }
.qe-legend .lg-assist { border-top: 2px solid var(--qe-as); color: var(--qe-as); }
.qe-legend .lg-quake { font-weight: 700; color: var(--qe-quake, var(--text)); }
.qe-legend .lg-orphan { border: 1px dashed var(--qe-n-bd); color: var(--text-3); }

/* what Quake gave everyone */
.qe-gavehd { display: flex; align-items: center; gap: 18px; margin-top: 64px; font-size: 13px; letter-spacing: .24em; color: var(--text-5); }
.qe-gavehd i { flex: 1; height: 1px; background: var(--line); }
.qe-gvt { flex: none; font-family: inherit; font-size: 12px; letter-spacing: .16em; padding: 9px 14px; background: var(--bg); border: 1px solid var(--line); color: var(--accent); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.qe-gvt:hover, .qe-gvt:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.qe-gv { margin-top: 10px; }
.qe-gvl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(var(--rows), auto); grid-auto-flow: column; column-gap: 56px; }
.qe-gvmore { display: none; margin-top: 30px; }
.qe-gv.open .qe-gvmore { display: block; }
.qe-gvmh { font-size: 12px; letter-spacing: .24em; color: var(--text-5); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.qe-gvl li { align-content: start; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: baseline; column-gap: 14px; padding: 11px 2px; border-bottom: 1px solid var(--line-3); }
.qe-gv .no { font-size: 12px; color: var(--qe-no); }
.qe-gv .t { font-size: 14px; letter-spacing: .16em; color: var(--accent); }
.qe-gv .o { font-size: 11px; letter-spacing: .16em; color: var(--hilite); text-align: right; }
.qe-gv .d { display: none; grid-column: 2 / -1; margin: 8px 0 2px; max-width: 62ch; font-size: 14px; line-height: 1.6; color: var(--text-3); }
.qe-gv.open .d { display: block; }

/* the tree: spine down the middle, branches either side */
.qe-tree { margin-top: 96px; }
.qe-row { display: grid; grid-template-columns: minmax(0, 1fr) 260px minmax(0, 1fr); grid-template-areas: "l m r"; padding-bottom: 70px; }
.qe-row:last-child { padding-bottom: 0; }
.qe-mid { grid-area: m; position: relative; }
.qe-mid::before { content: ""; position: absolute; left: 50%; top: 0; bottom: -70px; width: 2px; margin-left: -1px; background: var(--qe-spine); opacity: .55; }
.qe-row:first-child .qe-mid::before { top: 52px; }
.qe-row:last-child .qe-mid::before { bottom: auto; height: 52px; }
.qe-sp { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 104px; padding: 14px 16px; font-size: 12px; line-height: 17px; color: var(--text-3);
  background: var(--qe-sp-bg); border: 1px solid var(--qe-sp-bd); }
.qe-sp.root { background: var(--qe-root-bg); border-color: var(--accent); }
.qe-sp b { font-weight: 400; font-size: 15px; letter-spacing: .12em; color: var(--title); }
.qe-sp .yr { color: var(--accent); }
.qe-sp .qe-speng { margin: 6px 0 2px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--qe-eng); text-shadow: 0 0 10px color-mix(in srgb, var(--qe-eng) 35%, transparent); }   /* the engine each release debuted */
.qe-sp .qe-aka { font-size: 11px; letter-spacing: .04em; color: var(--text-5); }   /* its name before id Tech */
.qe-side { position: relative; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.qe-side.r { grid-area: r; padding-left: 64px; align-items: flex-start; }
.qe-side.l { grid-area: l; padding-right: 64px; align-items: flex-end; }
/* bus from the spine card to each branch. Every line is a whole 1px and each vertical runs 1px past
   the tick it meets, so corners close without the half-pixel shifts */
.qe-side:not(.empty)::before { content: ""; position: absolute; top: 52px; width: 32px; height: 1px; background: var(--qe-bus); }
.qe-side.r::before { left: 0; } .qe-side.l::before { right: 0; }
.qe-side:not(.empty)::after { content: ""; position: absolute; top: 17px; height: 36px; width: 1px; background: var(--qe-bus); }
.qe-side.r::after { left: 32px; } .qe-side.l::after { right: 32px; }
.qe-blk { position: relative; display: flex; flex-direction: column; gap: 10px; max-width: 100%; }
.qe-side.r .qe-blk { align-items: flex-start; } .qe-side.l .qe-blk { align-items: flex-end; }
.qe-blk::before { content: ""; position: absolute; top: 17px; width: 32px; height: 1px; background: var(--qe-bus); }
.qe-side.r .qe-blk::before { left: -32px; } .qe-side.l .qe-blk::before { right: -32px; }
.qe-blk:not(:last-child)::after { content: ""; position: absolute; top: 17px; height: calc(100% + 19px); width: 1px; background: var(--qe-bus); }
.qe-side.r .qe-blk::after { left: -32px; } .qe-side.l .qe-blk::after { right: -32px; }
/* a big cluster of loose sub-nodes: one bracket whose arms wrap the first chips' edges */
.qe-blk.qe-leaves { flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 5px 0 5px 7px; }
.qe-blk.qe-leaves::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; height: auto; border: 1px solid var(--qe-bus); border-right: 0; background: none; pointer-events: none; }
.qe-side.l .qe-blk.qe-leaves { justify-content: flex-end; padding: 5px 7px 5px 0; }
.qe-blk.qe-one { padding-top: 4px; }   /* puts a 26px chip's middle on the 17px tick line */
.qe-side.l .qe-blk.qe-leaves::after { left: auto; right: 0; border-right: 1px solid var(--qe-bus); border-left: 0; }
/* a branch's children: one per row, each tied into a rail that drops from under the branch card */
.qe-kids { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 100%; padding-left: 22px; margin-left: 14px; }
.qe-kids::before { content: ""; position: absolute; left: 0; top: -10px; height: 24px; width: 1px; background: var(--qe-rail); }
.qe-kids > * { position: relative; max-width: 100%; }
/* children have a 1px border and pseudo-elements are placed from inside it, hence -23px / 12px */
.qe-kids > *::before { content: ""; position: absolute; left: -23px; top: 12px; width: 22px; height: 1px; background: var(--qe-rail); }
.qe-kids > *:not(:last-child)::after { content: ""; position: absolute; left: -23px; top: 12px; height: calc(100% + 11px); width: 1px; background: var(--qe-rail); }
.qe-side.l .qe-kids { align-items: flex-end; padding-left: 0; margin-left: 0; padding-right: 22px; margin-right: 14px; }
.qe-side.l .qe-kids::before { left: auto; right: 0; }
.qe-side.l .qe-kids > *::before { left: auto; right: -23px; }
.qe-side.l .qe-kids > *:not(:last-child)::after { left: auto; right: -23px; }

.qe-node { display: inline-flex; align-items: center; min-height: 34px; padding: 0 10px; font-size: 13px; letter-spacing: .02em; white-space: nowrap;
  background: var(--qe-n-bg); border: 1px solid var(--qe-n-bd); color: var(--qe-n-tx); }
.qe-leaf { display: inline-flex; align-items: center; min-height: 26px; padding: 0 8px; font-size: 11px; letter-spacing: .02em; white-space: nowrap;
  background: var(--qe-l-bg); border: 1px solid var(--qe-l-bd); color: var(--qe-l-tx); }
.qe-leaf.dash { border-style: dashed; }
.qe-grp { max-width: 100%; padding: 10px 14px 12px; font-size: 12px; line-height: 19px; background: var(--qe-n-bg); border: 1px solid var(--qe-n-bd); }
.qe-gt { display: block; margin-bottom: 6px; padding-bottom: 6px; font-size: 13px; letter-spacing: .1em; color: var(--qe-n-tx); border-bottom: 1px solid var(--qe-n-bd); }
.qe-gr { display: block; color: var(--qe-g-tx); }
.qe-eng { font-weight: 400; color: var(--qe-eng); }
.fam-source .qe-eng { font-weight: var(--qe-src-eng-w, 400); color: var(--qe-src-eng, var(--qe-eng)); }   /* engines inside the Valve family (themes can recolour) */

/* families: Valve's Source line and the Call of Duty line */
.fam-source { --qe-n-bg: var(--qe-src-bg); --qe-n-bd: var(--qe-src-bd); --qe-n-tx: var(--qe-src-tx); --qe-g-tx: var(--qe-src-g); --qe-rail: var(--qe-src-bd);
  --qe-l-bg: var(--qe-src-lbg); --qe-l-bd: var(--qe-src-lbd); --qe-l-tx: var(--qe-src-g); }
.fam-cod { --qe-n-bg: var(--qe-cod-bg); --qe-n-bd: var(--qe-cod-bd); --qe-n-tx: var(--qe-cod-tx); --qe-g-tx: var(--qe-cod-g);
  --qe-l-bg: var(--qe-cod-lbg); --qe-l-bd: var(--qe-cod-lbd); --qe-l-tx: var(--qe-cod-g); }

/* hybrids: special cases, so they look like any other box; only the tag is loud, the name lightly tinted */
.qe-hyg { border-top: 2px solid var(--qe-hy); max-width: 360px; }
.qe-hyg.as { border-top-color: var(--qe-as); }
.qe-hyg .qe-gt { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.qe-hyn { color: var(--qe-hy-name); }
.qe-hyt { font-size: 10px; letter-spacing: .16em; color: var(--qe-hy); white-space: nowrap; }
.qe-hyt.as { color: var(--qe-as); }
.qe-hyg .qe-hyd { color: var(--qe-hy-note); }

.qe-foot { margin-top: 72px; font-size: 13px; letter-spacing: .14em; color: var(--text-5); }

@media (max-width: 1179px) {
  .qe-hd { grid-template-columns: minmax(0, 1fr); }
  .qe-gvl { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .qe-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "m" "r" "l"; position: relative; padding: 0 0 48px 26px; }
  .qe-row::before { content: ""; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--qe-spine); opacity: .55; }
  .qe-row:first-child::before { top: 52px; }
  .qe-row:last-child::before { bottom: auto; height: 52px; }
  .qe-mid::before { display: none; }
  .qe-sp { max-width: 420px; min-height: 0; }
  .qe-sp::before { content: ""; position: absolute; left: -18px; top: 50px; width: 17px; height: 2px; background: var(--qe-spine); opacity: .55; }
  .qe-side, .qe-side.l, .qe-side.r { padding: 16px 0 0 26px; margin-left: 12px; border-left: 1px solid var(--qe-bus); align-items: flex-start; }
  .qe-side.empty { display: none; }
  .qe-side::before, .qe-side::after, .qe-blk::after { display: none; }
  .qe-side .qe-blk::before, .qe-side.r .qe-blk::before, .qe-side.l .qe-blk::before { display: block; left: -27px; right: auto; width: 27px; }
  .qe-side.l .qe-blk.qe-leaves::after { left: 0; right: auto; border-left: 1px solid var(--qe-bus); border-right: 0; }
  .qe-side.l .qe-blk.qe-leaves { padding: 5px 0 5px 7px; }
  .qe-side.l .qe-blk { align-items: flex-start; }
  .qe-side.l .qe-blk.qe-leaves { justify-content: flex-start; }
  .qe-side.l .qe-kids { align-items: flex-start; padding-right: 0; margin-right: 0; padding-left: 22px; margin-left: 14px; }
  .qe-side.l .qe-kids::before { left: 0; right: auto; }
  .qe-side.l .qe-kids > *::before { right: auto; left: -23px; }
  .qe-side.l .qe-kids > *:not(:last-child)::after { right: auto; left: -23px; }
}
@media (max-width: 700px) {
  .qe { padding: 40px 16px 40px; }
  .qe-sub { font-size: 18px; }
  .qe-bl { font-size: 18px; letter-spacing: .24em; }
  .qe-gavehd { flex-wrap: wrap; row-gap: 12px; }
  .qe-gavehd i { display: none; }
  .qe-gvt { margin-left: auto; }
  .qe-gvl li { grid-template-columns: 28px minmax(0, 1fr); }
  .qe-gv .o { grid-column: 2; text-align: left; margin-top: 4px; }
  .qe-tree { margin-top: 64px; }
  .qe-row { padding-left: 22px; }
  .qe-sp::before { left: -14px; width: 13px; }
  .qe-side, .qe-side.l, .qe-side.r { padding-left: 14px; margin-left: 6px; }
  .qe-kids, .qe-side.l .qe-kids { padding-left: 16px; margin-left: 8px; }
  .qe-kids > *::before, .qe-side.l .qe-kids > *::before { left: -17px; width: 16px; }
  .qe-kids > *:not(:last-child)::after, .qe-side.l .qe-kids > *:not(:last-child)::after { left: -17px; }
  .qe-side .qe-blk::before, .qe-side.r .qe-blk::before, .qe-side.l .qe-blk::before { left: -15px; width: 15px; }
  .qe-node { white-space: normal; padding: 6px 10px; }
  .qe-leaf { white-space: normal; padding: 4px 8px; }
  .qe-gr { overflow-wrap: anywhere; }
}

/* ---------------------------------------------------------------- TREE / LIST switch (top right) */
.qe-top { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; }
.qe-views { display: inline-flex; flex: none; }
.qe-views button { min-height: 36px; padding: 0 16px; font-family: inherit; font-size: 12px; letter-spacing: .2em; background: var(--bg); border: 1px solid var(--line); color: var(--accent); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.qe-views button + button { margin-left: -1px; }
.qe-views button:hover, .qe-views button:focus-visible { border-color: var(--accent); position: relative; }
.qe-views button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); cursor: default; position: relative; }
.qe-body { display: flex; flex-direction: column; }
.qe-gavebox { order: 1; } .qe-tree, .qe-list { order: 2; }
.qe.view-tree .qe-list, .qe.view-list .qe-tree, .qe.view-tree .for-list, .qe.view-list .for-tree { display: none; }
.qe.view-list .qe-gavebox { order: 3; margin-top: 16px; }   /* the list leads; what Quake gave everyone follows it */

/* ---------------------------------------------------------------- LIST view: every name, sorted by family, in neat columns */
.qe-list { margin-top: 64px; font-size: 14px; line-height: 1.75; }
.qe-lroot { display: flex; align-items: baseline; gap: 18px; padding-bottom: 6px; font-size: 18px; letter-spacing: .1em; }
.qe-lroot b { font-weight: 700; color: var(--title); } .qe-lroot span { font-size: 13px; color: var(--text-5); }
.qe-ltrunk { margin-left: 8px; border-left: 1px dashed var(--qe-bus); }
.qe-lb { position: relative; padding: 18px 0 8px 34px; }
.qe-lb::before { content: ""; position: absolute; left: 0; top: 30px; width: 24px; border-top: 1px dashed var(--qe-bus); }
.qe-lb h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 6px; font-weight: 400; font-size: 15px; letter-spacing: .18em; color: var(--fc); }
.qe-lb h3 small { font-size: 12px; letter-spacing: .1em; color: var(--text-6); }
.qe-lb p { margin: 0 0 8px; max-width: 80ch; font-size: 13px; color: var(--text-5); }
.qe-lrows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 60px; }
.qe-lr { display: grid; grid-template-columns: 22px minmax(0, 1fr) 52px 190px; align-items: baseline; color: var(--text-4); }
.qe-lr .g { color: var(--qe-bus); white-space: pre; }
.qe-lr .n { min-width: 0; padding-right: 12px; text-transform: uppercase; color: var(--text-4); }
.qe-lr .y { color: var(--text-5); }
.qe-lr .v { font-size: 12px; color: var(--text-6); }
.qe-lr.q .n { font-weight: 700; color: var(--qe-quake, var(--text)); }   /* a Quake game: bold */
.qe-lr.q .y { color: var(--text-3); }
.qe-badge { display: inline-block; margin-left: 10px; padding: 0 6px; font-size: 10px; letter-spacing: .14em; line-height: 16px; color: var(--qe-hy); border-top: 2px solid var(--qe-hy); vertical-align: 1px; font-weight: 400; }
.qe-badge.as { color: var(--qe-as); border-top-color: var(--qe-as); }

@media (max-width: 1000px) {
  .qe-lrows { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .qe-list { margin-top: 48px; font-size: 13px; }
  .qe-lb { padding-left: 22px; }
  .qe-lb::before { width: 14px; }
  .qe-lr { grid-template-columns: 22px minmax(0, 1fr) 44px 96px; }
  .qe-lr .v { font-size: 11px; }
  .qe-views button { padding: 0 12px; }
}

/* ---------------------------------------------------------------- a side track (ET: Quake Wars): out of the spine, back in lower down */
.qe-bcard { min-width: 260px; max-width: 260px; border-style: dashed; border-color: color-mix(in srgb, var(--qe-spine) 55%, var(--line)); }
.qe-side.l .qe-bcard { text-align: left; }
/* the way back in: from the card's spine-facing edge, across to the spine (64px gutter + half the 260px spine column) */
.qe-into { position: absolute; top: calc(100% - 22px); height: 0; width: 194px; border-top: 2px solid var(--qe-spine); opacity: .55; pointer-events: none; }
.qe-side.l .qe-into { left: 100%; } .qe-side.r .qe-into { right: 100%; }
.qe-into i { position: absolute; bottom: 4px; font-style: normal; font-size: 10px; letter-spacing: .14em; color: var(--accent); white-space: nowrap; opacity: 1; }
.qe-side.l .qe-into i { right: 8px; } .qe-side.r .qe-into i { left: 8px; }
.qe-into::after { content: ""; position: absolute; top: -6px; border: 5px solid transparent; }
.qe-side.l .qe-into::after { right: -1px; border-left-color: var(--qe-spine); border-right: 0; }
.qe-side.r .qe-into::after { left: -1px; border-right-color: var(--qe-spine); border-left: 0; }
.qe-bridge .qe-kids { margin-top: 0; }   /* the rail reaches up into the card's bottom edge */
@media (max-width: 1179px) {
  .qe-into { display: none; }
  .qe-bcard { min-width: 0; }
}
/* the way out: an elbow from the spine (above the card) over and down into the card's top edge */
.qe-side.qe-bridge::before { top: -36px; width: 324px; height: 1px; background: var(--qe-bus); }
.qe-side.l.qe-bridge::before { left: auto; right: -130px; } .qe-side.r.qe-bridge::before { right: auto; left: -130px; }
.qe-side.qe-bridge::after { top: -36px; height: 36px; width: 1px; background: var(--qe-bus); }
.qe-side.l.qe-bridge::after { left: auto; right: 194px; } .qe-side.r.qe-bridge::after { right: auto; left: 194px; }
.qe-bridge > .qe-blk::before { display: none; }
@media (max-width: 1179px) {
  .qe-side.qe-bridge::before, .qe-side.qe-bridge::after { display: none; }
  .qe-bridge > .qe-blk::before { display: block; }
}
@media (max-width: 1179px) { .qe-bcard::before { display: none; } }

.qe-key { display: inline-block; min-width: 20px; padding: 0 5px; border: 1px solid var(--line); color: var(--hilite); text-align: center; letter-spacing: 0; }
.qe-arr { display: inline-block; width: 1.6em; height: .8em; margin-left: .2em; vertical-align: .02em; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: square; vector-effect: non-scaling-stroke; }
.qe-arr path { vector-effect: non-scaling-stroke; }

/* a minor spine card (DOOM, the 2.5D origin): smaller, dashed, and joined to the 3D line by a dashed spine */
.qe-sp.minor { min-height: 0; padding: 10px 14px; border-style: dashed; background: var(--bg); color: var(--text-5); }
.qe-sp.minor b { font-size: 13px; }
.qe-sp.minor .qe-speng { font-size: 11px; margin-top: 4px; text-shadow: none; }
.qe-row.minor { padding-bottom: 50px; }
.qe-row.minor .qe-mid::before { bottom: -50px; background: repeating-linear-gradient(180deg, var(--qe-spine) 0 5px, transparent 5px 10px); }
@media (max-width: 1179px) {
  .qe-row.minor::before { background: repeating-linear-gradient(180deg, var(--qe-spine) 0 5px, transparent 5px 10px); }
}

/* "What Quake gave everyone", folded: just the titles, four across, so the tree starts sooner. Details + extras open on demand. */
.qe-gv:not(.open) .qe-gvl { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows4), auto); column-gap: 32px; }
.qe-gv:not(.open) .qe-gvl li { grid-template-columns: 28px minmax(0, 1fr); padding: 7px 2px; }
.qe-gv:not(.open) .o { display: none; }
.qe-gv:not(.open) .t { font-size: 13px; }
.qe-gavehd { margin-top: 48px; }
.qe-tree { margin-top: 72px; }
@media (max-width: 1179px) { .qe-gv:not(.open) .qe-gvl { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), auto); } }
@media (max-width: 700px) { .qe-gv:not(.open) .qe-gvl li { grid-template-columns: 22px minmax(0, 1fr); } .qe-gv:not(.open) .t { font-size: 12px; letter-spacing: .1em; } }

/* the whole page stops growing on very wide screens and centres, like the main site (below ~1520px nothing changes) */
.qe { max-width: 1520px; margin-left: auto; margin-right: auto; }

/* LIST: the trunk starts at the first family's tick (no root above it) */
.qe-ltrunk { border-left: 0; position: relative; }
.qe-ltrunk::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 0; border-left: 1px dashed var(--qe-bus); }
.qe-ltrunk > .qe-lb:first-child { padding-top: 0; }
.qe-ltrunk > .qe-lb:first-child::before { top: 12px; }
.qe-list { margin-top: 40px; }
/* the subtitle under the title: the theme's title colour (rosewater on Kraken) */
.qe-sub { color: var(--title); }