/* Askii's editorial layer (11 Oct 2026, Peter: "made for a high end art magazine"). One quiet voice over the six renderers:
   titles and questions in EB Garamond (as the map's territory names), eyebrows in Rules small caps instead of monospace, hairlines
   instead of tinted boxes, orange only as an accent. The objects themselves (slides, film frames) keep Le Random's brand type.
   On when <body> has .v-gal (the map page and the article version); the map's ?v=before turns it off. Selectors start with
   html body.v-gal so they outrank each renderer's own scoped CSS, whatever order the styles load in. */
:root { --ed-serif: "EB Garamond", Garamond, Georgia, serif; --ed-sans: Rules, "Helvetica Neue", Arial, sans-serif; }

/* titles */
html body.v-gal :is(.rx-title, .rx-t, .xp-title, .rd-title, .ra-title, .rp-title, .rv-title) {
  font-family: var(--ed-serif); font-weight: 400; letter-spacing: -.012em; line-height: 1.06;
  font-size: clamp(30px, 3.3vw, 46px); text-wrap: balance;
}
html body.v-gal :is(.xp-dek, .rd-dek, .rx-intro, .rp-intro, .ra-intro, .rv-intro) { font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.5; max-width: 60ch; }

/* eyebrows: small caps, Rules, the kind in orange */
html body.v-gal :is(.rx-k, .rv-kick, .rv-meta) { font-family: var(--ed-sans); font-weight: 500; font-size: 10.5px; letter-spacing: .16em; }

/* timeline: images and words, no tinted cards, no era stripes */
html body.v-gal .r-timeline .tl-card { background: transparent; box-shadow: none; }
html body.v-gal .r-timeline .tl-card:hover, html body.v-gal .r-timeline .tl-card.hot { transform: none; box-shadow: none; }
html body.v-gal .r-timeline .tl-card.on { box-shadow: 0 -2px 0 var(--or); }
html body.v-gal .r-timeline .tl-plate { border-top: 0; background: color-mix(in srgb, var(--ink) 5%, transparent); }
html body.v-gal .r-timeline .tl-plate.noimg { background: transparent; border-bottom: 1px solid var(--hair); }
html body.v-gal .r-timeline .tl-plate .yr { font-family: var(--ed-serif); font-weight: 400; letter-spacing: -.02em; color: var(--or-t, #C93D00); left: 0; }
html body.v-gal .r-timeline .sh-img { border-top: 0; }
html body.v-gal .r-timeline .sh-img .yr { font-family: var(--ed-serif); font-weight: 400; letter-spacing: -.02em; color: var(--or-t, #C93D00); }
html body.v-gal .r-timeline .tl-body { padding: 14px 0 12px; }
html body.v-gal .r-timeline .tl-ck { font-family: var(--ed-sans); font-size: 9.5px; letter-spacing: .15em; }
html body.v-gal .r-timeline .tl-ck i { background: var(--ink3); width: 5px; height: 5px; }
html body.v-gal .r-timeline .tl-t { font-family: var(--ed-serif); font-weight: 400; font-size: 20px; line-height: 1.15; letter-spacing: -.005em; }
html body.v-gal .r-timeline .tl-c { font-size: 14.5px; }
html body.v-gal .r-timeline .tl-f { font-family: var(--ed-sans); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; }
html body.v-gal .r-timeline :is(.tl-span, .tl-prog) { font-family: var(--ed-sans); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }

/* quiz: a serif question, hairline answers, a hairline progress */
html body.v-gal .qz-q { font-family: var(--ed-serif); font-weight: 400; font-size: clamp(26px, 2.7vw, 38px); line-height: 1.14; letter-spacing: -.008em; }
html body.v-gal .qz-n { font-family: var(--ed-sans); font-size: 10px; letter-spacing: .16em; }
html body.v-gal .qz-pip { height: 2px; width: 26px; }
html body.v-gal .qz-opt { border-width: 1px; }
html body.v-gal .qz-key { font-family: var(--ed-sans); font-size: 11px; width: 28px; height: 28px; }
html body.v-gal :is(.qz-verdict, .qz-say) { font-family: var(--ed-serif); font-weight: 400; letter-spacing: -.008em; }
html body.v-gal .qz-verdict { font-size: 26px; }
html body.v-gal .qz-big { font-family: var(--ed-serif); font-weight: 400; letter-spacing: -.03em; color: var(--or-t, #C93D00); }

/* the map's result sheet: its top line in the same small caps */
html body.v-gal .k-kick b { font-family: var(--ed-sans); font-weight: 500; font-size: 10.5px; letter-spacing: .16em; }