/* The two front doors for people: /new/ (start playing, help) and /back/ (the lookup beside
   the call to the Discord). Loaded after site.css (and reference.css or people.css) by those
   pages only; uses site.css's tokens. */

/* /back/: find your character and find your friends, side by side where there is room */
.back-first{display:grid;grid-template-columns:minmax(0,1fr);gap:40px var(--gutter);align-items:start}
.back-first > *{grid-column:auto}
.back-first h2{font-size:clamp(30px,3.4vw,44px);margin-bottom:.5em}
@media (min-width:861px){
  .back-first{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
}

/* /new/ */
.start{margin-top:clamp(36px,5vw,64px)}
.start > h2{font-size:clamp(30px,3.4vw,44px);margin-bottom:.4em}
.start-act{display:flex;flex-wrap:wrap;gap:14px 18px;margin:24px 0 12px;max-width:none}
.start-more{list-style:none;margin:22px 0 0;padding:16px 0 0;border-top:1px solid var(--rule)}
.start-more li{padding:3px 0}
.leads{margin:.4em 0 0;padding-left:1.2em;max-width:36em}
.leads li{padding:6px 0}
.leads b{font-weight:600;color:var(--text)}
#help .dc{margin-top:8px}
#help .sub{margin-top:clamp(36px,4.5vw,56px)}
#help h3,#screen-reader h3{margin-bottom:.4em}
#screen-reader h3{font-size:clamp(22px,2vw,27px);margin-top:1.2em}
.steps .gtext{margin-top:14px}
.steps .gtext h4{font:italic 400 clamp(20px,1.8vw,24px)/1.25 var(--world);margin:1.2em 0 .4em}
#screen-reader .reader-tested{margin-top:18px}
@media (max-width:480px){
  .start-act .btn{flex:1 1 100%;text-align:center}
}