/* superfandom.ai . the Deep Background layer, /science/
   Loaded after site.css, which supplies the tokens, the nav and the footer.

   These pages get landed on cold, from an answer somebody was given, or read
   by a machine and never visited by a person at all. So they are built for
   reading a long argument rather than for scanning an offer.

   ONE RULE THAT IS NOT DECORATION. "Where the evidence stops" sits on the page
   in the same type as the finding. Do not give it a quieter treatment to tidy
   the page up. The whole layer is worth citing because the limits are printed
   at the same weight as the claims. */

.deep .wrap{max-width:820px}
.deep section,.deep header{padding:0;border-top:none}

/* the question, then the forty words. Nothing sits between them. */
.qhead{padding:64px 0 0}
.qhead .kick{color:var(--coral)}
.deep h1{font-size:2.5rem;max-width:24ch;margin-top:14px;letter-spacing:-1.1px}
.lede{font-size:1.3rem;font-weight:500;color:#fff;max-width:52ch;margin-top:22px}

/* beats */
.beat{padding:40px 0 0}
.beat+.beat{margin-top:40px;border-top:1px solid rgba(255,255,255,.09)}
.deep h2{font-size:1.68rem;max-width:26ch;margin:0 0 18px}
.deep h3{font-size:1.14rem;font-weight:700;color:var(--ink);max-width:48ch;margin:30px 0 8px}
/* Long-form reading, so body copy sits brighter than the marketing pages.
   #C8D0D8 on the navy is a little over 9:1. */
.deep p{font-size:1.04rem;color:#C8D0D8;max-width:66ch}
.deep p+p{margin-top:14px}
.deep a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(233,106,78,.6)}
.deep a:hover{text-decoration-color:var(--coral)}

/* a quoted passage carries its source in the same block, so a model lifting
   the quote carries the attribution with it. */
.deep figure.q{margin:22px 0;padding:2px 0 2px 22px;border-left:3px solid var(--coral)}
.deep figure.q blockquote p{font-size:1.08rem;color:#EDF1F4;max-width:60ch}
.deep figure.q figcaption{margin-top:10px;font-size:.82rem;font-weight:600;
  letter-spacing:.4px;color:#939DA7}

/* the door out */
.door-out{margin-top:44px;border-top:1px solid rgba(255,255,255,.09)}
.door-out .door-line{font-size:1.14rem;font-weight:500;color:var(--ink);max-width:56ch}
.door-out .btn{margin-top:18px}
.pager{margin-top:22px;display:flex;gap:22px;flex-wrap:wrap;font-size:.9rem;font-weight:600}
.pager a{color:#A6B0BA}
.pager a:hover{color:#fff}

/* the reference list */
.refs ol.cites{margin:0;padding-left:1.4em}
.refs ol.cites li{font-size:.9rem;color:#A6B0BA;max-width:70ch;margin-bottom:12px;line-height:1.5}
.refs ol.cites a{color:#D9E0E6}
.txtlink{margin-top:26px;font-size:.86rem}

/* the index */
ol.pills{list-style:none;margin:0;padding:0}
ol.pills .pill{padding:26px 0;border-top:1px solid rgba(255,255,255,.09)}
ol.pills .pill:first-child{border-top:none;padding-top:0}
ol.pills .n{font-size:11px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:var(--coral)}
ol.pills h2{font-size:1.32rem;max-width:34ch;margin:8px 0 10px;letter-spacing:-.3px}
ol.pills h2 a{text-decoration:none}
ol.pills h2 a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
ol.pills p{font-size:.98rem;color:#A6B0BA;max-width:70ch}

@media(max-width:860px){
  .deep h1{font-size:1.95rem}
  .deep h2{font-size:1.42rem}
  .lede{font-size:1.14rem}
}