/* Re:Life Lab — TOP map (theme 0.9.6 candidate, Site UX PHASE E). Loaded only on the front page while RELIFE_TOP_MAP and RELIFE_EDITORIAL are on (body.rl-topmap).
   = the PHASE D final candidate: option C (a reading map of the Hubs' own questions) + option A (spacing, fewer bands). Every rule is under body.rl-r3.rl-topmap. */
body.rl-r3.rl-topmap{--sec:64px}
@media (min-width:768px){body.rl-r3.rl-topmap{--sec:88px}}
@media (min-width:1024px){body.rl-r3.rl-topmap{--sec:112px}}
body.rl-r3.rl-topmap .rl-sec--psand,body.rl-r3.rl-topmap .rl-sec--paper{background:var(--paper)}
body.rl-r3.rl-topmap .rl-sec + .rl-sec:not(.rl-sec--sand){border-top:1px solid var(--line)}
body.rl-r3.rl-topmap .rl-sec__h{margin-bottom:32px}
@media (min-width:1024px){body.rl-r3.rl-topmap .rl-sec__h h2{font-size:32px}}
body.rl-r3.rl-topmap .rl-cg{border-top:1px solid var(--navy)}
body.rl-r3.rl-topmap .rl-cg__c{border-bottom:0;padding:22px 0 18px}
body.rl-r3.rl-topmap .rl-cg__q{font-size:15px;line-height:1.8;color:var(--text)}
body.rl-r3.rl-topmap .rl-cg .rl-go span{font-weight:500}
@media (min-width:768px){body.rl-r3.rl-topmap .rl-cg{gap:0 40px}}
body.rl-r3.rl-topmap .rl-cd a{border-top:1px solid var(--line)}
body.rl-r3.rl-topmap .rl-cd a i{display:none}
body.rl-r3.rl-topmap .rl-cd__n{font-family:var(--f-ed);font-weight:600}
body.rl-r3.rl-topmap .rl-lt svg,body.rl-r3.rl-topmap .rl-up__side svg{border:0;box-shadow:none}
body.rl-r3.rl-topmap .rl-dm__order{margin:-14px 0 28px;font-size:15px;line-height:1.8;color:var(--sub)}
body.rl-r3.rl-topmap .rl-dm__order b{font-weight:600;color:var(--ink)}
body.rl-r3.rl-topmap .rl-dm{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--navy)}
body.rl-r3.rl-topmap .rl-dm__f{padding:22px 0 8px;border-bottom:1px solid var(--line)}
body.rl-r3.rl-topmap .rl-dm__h{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--f-ed);font-weight:600;font-size:22px;letter-spacing:.04em;color:var(--ink)}
body.rl-r3.rl-topmap .rl-dm__h svg{width:28px!important;height:28px!important;color:var(--ochre);flex:none}
body.rl-r3.rl-topmap .rl-dm__q{margin:6px 0 10px;font-size:14px;line-height:1.7;color:var(--sub)}
body.rl-r3.rl-topmap .rl-dm ol{list-style:none;margin:0;padding:0}
body.rl-r3.rl-topmap .rl-dm li a{display:block;padding:12px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink)}
body.rl-r3.rl-topmap .rl-dm li a b{display:block;font-family:var(--f-ed);font-weight:600;font-size:17px;letter-spacing:.03em}
body.rl-r3.rl-topmap .rl-dm li a small{display:block;margin-top:2px;font-size:13px;line-height:1.6;color:var(--sub)}
body.rl-r3.rl-topmap .rl-dm li a:hover b{text-decoration:underline;text-decoration-color:var(--ochre);text-underline-offset:5px}
body.rl-r3.rl-topmap .rl-dm__all{display:inline-block;margin:6px 0 10px;font-size:14px;color:var(--navy);text-decoration:underline;text-decoration-color:var(--navy-line);text-underline-offset:4px}
@media (min-width:768px){
  body.rl-r3.rl-topmap .rl-dm{grid-template-columns:1fr 1fr;gap:0 48px}
  body.rl-r3.rl-topmap .rl-dm__f{padding-top:26px}
}
@media (min-width:1024px){body.rl-r3.rl-topmap .rl-dm{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px}body.rl-r3.rl-topmap .rl-dm__f{border-bottom:0}}
body.rl-r3.rl-topmap #rl-fields{background:var(--paper)}               
body.rl-r3.rl-topmap .rl-dm__all{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:767px){
  body.rl-r3.rl-topmap .rl-dm__order{margin:-10px 0 18px}
  body.rl-r3.rl-topmap .rl-dm li:nth-child(n+3),body.rl-r3.rl-topmap .rl-dm__q,body.rl-r3.rl-topmap .rl-dm li a small{display:none}
  body.rl-r3.rl-topmap .rl-dm__f{padding:16px 0 2px}
  body.rl-r3.rl-topmap .rl-dm__h{font-size:20px}
  body.rl-r3.rl-topmap .rl-dm ol{margin-top:6px}
  body.rl-r3.rl-topmap .rl-dm li a{display:flex;align-items:center;min-height:48px;padding:6px 0}
  body.rl-r3.rl-topmap .rl-dm li a b{font-size:16px}
  body.rl-r3.rl-topmap .rl-dm__all{margin:0 0 4px;font-size:13px}
  body.rl-r3.rl-topmap .rl-hero__fields{display:none}
  body.rl-r3.rl-topmap .rl-hero__cta:has(+ .rl-hero__fields) .rl-lnk{display:inline-flex}
}
/* 0.9.6 — phones: the four fields side by side in two columns (the stacked map pushed the first article ~400px further down than today's TOP).
   Same entrances and links; smaller heading and label type so the columns do not crowd at 320px. */
@media (max-width:767px){
  body.rl-r3.rl-topmap .rl-dm{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
  body.rl-r3.rl-topmap .rl-dm__h{font-size:17px;gap:6px;letter-spacing:.02em}
  body.rl-r3.rl-topmap .rl-dm__h svg{width:22px!important;height:22px!important}
  body.rl-r3.rl-topmap .rl-dm li a{min-height:46px}
  body.rl-r3.rl-topmap .rl-dm li a b{font-size:15px;line-height:1.45;letter-spacing:.01em}
  body.rl-r3.rl-topmap .rl-dm__all{line-height:1.5}
}
/* 0.9.6 — tablets (768–1023px): the same compact map as phones in two columns (with the questions and the third entrance the map was 835px tall). */
@media (min-width:768px) and (max-width:1023px){
  body.rl-r3.rl-topmap .rl-dm li:nth-child(n+3),body.rl-r3.rl-topmap .rl-dm__q,body.rl-r3.rl-topmap .rl-dm li a small{display:none}
  body.rl-r3.rl-topmap .rl-dm__f{padding:18px 0 4px}
  body.rl-r3.rl-topmap .rl-dm li a{display:flex;align-items:center;min-height:48px;padding:6px 0}
}
/* 0.9.6 — phone columns: long labels wrap into two even lines instead of leaving one character behind (text-wrap is already used by the R3 headings). */
@media (max-width:767px){
  body.rl-r3.rl-topmap .rl-dm__all{font-size:12px;letter-spacing:0}
  body.rl-r3.rl-topmap :is(.rl-dm li a b,.rl-dm__h,.rl-dm__all){text-wrap:balance}
}
@media (max-width:374px){body.rl-r3.rl-topmap .rl-dm{gap:0 14px}body.rl-r3.rl-topmap .rl-dm li a b{font-size:14.5px}}