/* ==========================================================================
   The deep research pages. Paper, text only: "nothing that needs rendering
   to make sense". Values from reference/build-source/deep.html, the render
   MattHart_DeepResearchPages_FINAL.pdf was made from.

   The render has no topbar and ends on a one line address. A page somebody
   lands on from a search needs a way into the rest of the site, so here the
   shared topbar and footer frame it.
   ========================================================================== */

.dp { position: relative; --hair: #DCD6C2 }
.dp-wrap { padding: 96px 300px 110px 230px }
.dp .n { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .15em;
         text-transform: uppercase; color: var(--mut) }
.dp h1 { margin: 20px 0 0 0; font-size: 50px; font-weight: 800; letter-spacing: -1.8px;
         line-height: 1.06; max-width: 900px }
.dp .cite { margin-top: 40px; padding: 26px 0; border-top: 1px solid var(--hair);
            border-bottom: 1px solid var(--hair); max-width: 1070px }
.dp .cite p { font-size: 17px; line-height: 1.5; color: #2C2E30 }
.dp .cite p + p { margin-top: 10px }
.dp .cite .lk { font-family: var(--mono); font-size: 13px; letter-spacing: .02em; color: var(--mut);
                margin-top: 14px; word-break: break-all; line-height: 1.6 }
.dp .cite .lk a { color: inherit; text-decoration: none }
.dp .meta { display: flex; gap: 14px; align-items: center; margin-top: 26px; flex-wrap: wrap }
.dp .chip { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
            border: 1px solid rgba(16,17,18,.3); padding: 8px 14px; border-radius: 2px }
.dp .chip.rel { background: var(--ink); color: var(--cream); border-color: var(--ink) }
.dp .chip.cmb { background: var(--yellow); border-color: var(--yellow); font-weight: 700 }
.dp .scroll { font-size: 27px; font-weight: 700; letter-spacing: -.7px; line-height: 1.25;
              margin-top: 38px; max-width: 900px; border-left: 4px solid var(--yellow); padding-left: 24px }
.dp .sec { margin-top: 52px; max-width: 1070px; border-top: 1px solid var(--hair); padding-top: 26px }
.dp .sec h2 { margin: 0; font-size: 27px; font-weight: 800; letter-spacing: -.8px; line-height: 1.2 }
.dp .sec .body { margin-top: 16px; font-size: 19px; line-height: 1.58; max-width: 1000px; color: var(--ink) }
.dp .sec .body p + p { margin-top: 16px }
.dp .back { display: inline-block; font-size: 18px; font-weight: 800; letter-spacing: -.3px;
            margin-top: 54px; border-bottom: 3px solid var(--yellow); padding-bottom: 4px;
            color: var(--ink); text-decoration: none }
.dp .stamp { position: absolute; right: 120px; top: 100px; font-size: 62px; font-weight: 900;
             letter-spacing: -2.4px; line-height: 1; color: rgba(16,17,18,.13) }

@media (max-width: 1200px) {
  .dp-wrap { padding-right: 120px }
}

/* the design system's one phone rule for these: .deep-wrap 46 22 0 22 */
@media (max-width: 900px) {
  .dp-wrap { padding: 46px 22px 72px 22px }
  .dp .stamp { right: 22px; top: 40px; font-size: 40px; letter-spacing: -1.4px }
  .dp .n { padding-right: 64px; line-height: 1.6 }
  .dp h1 { font-size: 30px; letter-spacing: -.9px; line-height: 1.1 }
  .dp .cite p { font-size: 16px }
  .dp .cite .lk { font-size: 12px }
  .dp .chip { font-size: 11px; padding: 7px 11px }
  .dp .scroll { font-size: 21px; letter-spacing: -.5px; padding-left: 18px }
  .dp .sec { margin-top: 40px }
  .dp .sec h2 { font-size: 22px; letter-spacing: -.5px }
  .dp .sec .body { font-size: 17px; line-height: 1.55 }
}
.dp a.chip { color: inherit; text-decoration: none }