/* ==========================================================================
   Research. Paper and ink, with a black floor.

   Values from reference/build-source/research.html, the render the signed off
   MattHart_Research_FINAL.pdf was made from, scoped under .rp so they cannot
   touch the home page's own .floor, .hero and the rest. Its inline styles are
   in research-gen.css, which loads after this file, so the render's own
   spacing wins over the resets here.
   ========================================================================== */

.rp { --p1: 114px; --p: 120px; --rail-x: 109px; --rail-w: 3px;
      --hair: #DCD6C2; --soft: #2C2E30 }

.rp .n { font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
         text-transform: uppercase; color: var(--mut); display: block }
.rp section { padding: 0 120px 0 230px; position: relative }
.rp .lede { font-size: 19px; line-height: 1.55; max-width: 760px; margin-top: 20px }
.rp .lede.w { max-width: 900px }
.rp h2 { margin: 0; font-size: 40px; font-weight: 800; letter-spacing: -1.3px; line-height: 1.08 }
.rp .hero { margin: 0; font-size: 46px; font-weight: 800; letter-spacing: -1.4px;
            line-height: 1.1; max-width: 1000px }

/* The dated anchor under the open. The same small grey mono as the register's
   notes, so it is a note and not a new voice. Matt, 2 Oct 2026. */
.rp .rp-stamp { font-family: var(--mono); font-size: 13px; line-height: 1.6;
                color: var(--mut); margin-top: 44px; max-width: 820px }

/* three questions */
.rp .q { margin-top: 64px; max-width: 1000px }
.rp .q .qq { font-size: 31px; font-weight: 900; letter-spacing: -1px; line-height: 1.18; max-width: 860px }
.rp .q .qa { font-size: 19px; line-height: 1.55; margin-top: 18px; max-width: 780px }

/* five */
/* The render spaced them 42 apart, which read as a double or triple space.
   A word space and a bit, so they read as one line of five. Matt, 18 Sept. */
.rp .five { display: flex; flex-wrap: wrap; gap: 0 .36em; margin-top: 34px; max-width: 1160px }
.rp .five { font-size: 34px }   /* so the gap's em is the type's */
.rp .five div { font-size: 34px; font-weight: 800; letter-spacing: -1.1px; line-height: 1.5 }
.rp .punch { font-size: 40px; font-weight: 900; letter-spacing: -1.4px; margin-top: 26px;
             display: inline-block; border-bottom: 5px solid var(--yellow); padding-bottom: 6px }

/* the register */
.rp .part { display: grid; grid-template-columns: 520px minmax(0, 1fr); gap: 60px;
            margin-top: 70px; align-items: start }
.rp .part .nar p { font-size: 18px; line-height: 1.55; margin-top: 16px; color: var(--soft) }
.rp .part .nar .pl { font-size: 26px; font-weight: 800; letter-spacing: -.7px; line-height: 1.15 }
.rp .found { display: inline-block; font-size: 30px; font-weight: 900; letter-spacing: -1px;
             line-height: 1.1; margin-bottom: 38px }
/* No underline: it heads the links rather than being one, and on this site a
   yellow underline goes somewhere. 38 below keeps the rows where the render
   put them (6 padding + 4 line + 28). Matt, 18 Sept. */
.rp .row { display: block; position: relative; padding: 17px 0 15px 34px;
           border-top: 1px solid var(--hair); color: inherit; text-decoration: none }
.rp .row:last-child { border-bottom: 1px solid var(--hair) }
.rp .row .cl { display: inline; font-size: 21px; font-weight: 700; letter-spacing: -.5px;
               line-height: 1.45; box-shadow: inset 0 -3px 0 var(--yellow) }
.rp .row .mt { font-family: var(--mono); font-size: 13.5px; letter-spacing: .03em; margin-top: 9px;
               color: var(--mut); display: flex; justify-content: space-between; gap: 24px }
.rp .row .mt b { color: var(--ink); font-weight: 500 }
.rp .row .dot { position: absolute; left: 0; top: 23px; width: 13px; height: 13px;
                border-radius: 50%; background: var(--yellow) }
.rp .rownote { font-family: var(--mono); font-size: 13px; color: var(--mut);
               padding: 14px 0 14px 34px; border-top: 1px solid var(--hair) }

/* the board */
.rp .panel { background: #FFFFFF; max-width: 1250px; margin-top: 40px; padding-bottom: 6px }
.rp .panel img { width: 100%; display: block }
.rp .regs { display: grid; grid-template-columns: 1fr 1fr; gap: 0;
            border-top: 3px solid var(--ink); margin: 14px 54px 0 54px }
.rp .regs > div { padding: 26px 34px 40px 0 }
.rp .regs > div:last-child { padding-left: 44px; border-left: 1px solid var(--hair) }
.rp .regs h4 { margin: 0 0 18px 0; font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
               text-transform: uppercase; color: var(--mut) }
.rp .regs ul { margin: 0; padding: 0 }
.rp .regs li { list-style: none; font-size: 20px; font-weight: 600; letter-spacing: -.4px;
               line-height: 1.3; margin-bottom: 13px }

/* absent */
.rp .abs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 44px; max-width: 1250px }
.rp .abs > div { border-top: 3px solid var(--ink); padding-top: 20px }
.rp .abs h4 { margin: 0 0 14px 0; font-size: 26px; font-weight: 800; letter-spacing: -.7px }
.rp .abs p { font-size: 17px; line-height: 1.5; color: var(--soft) }

/* the combine */
.rp .seven { margin-top: 34px; max-width: 1080px }
.rp .seven .s { padding: 15px 0; border-top: 1px solid var(--hair); display: grid;
                grid-template-columns: 270px 1fr; gap: 30px; align-items: baseline }
.rp .seven .s:last-child { border-bottom: 1px solid var(--hair) }
.rp .seven .s b { font-size: 21px; font-weight: 800; letter-spacing: -.5px; line-height: 1.45;
                  box-shadow: inset 0 -3px 0 var(--yellow) }
.rp .rp-cmb { color: inherit; text-decoration: none }
.rp .seven .s span { font-size: 18px; line-height: 1.45; color: var(--soft) }
.rp .build { margin-top: 52px; max-width: 900px }
.rp .build div { font-size: 25px; font-weight: 600; letter-spacing: -.6px; line-height: 1.3;
                 padding: 13px 0; border-bottom: 1px solid var(--hair) }
.rp .build div:last-child { border-bottom: 0; font-weight: 800 }
.rp .conewrap { display: grid; grid-template-columns: 230px 1fr; gap: 56px; align-items: center;
                margin-top: 56px; max-width: 1150px }
.rp .conedepth { font-size: 34px; font-weight: 900; letter-spacing: -1.1px; line-height: 1.2 }

/* the floor. Body copy at full cream: the PDF shows it full, the render had
   it at 93 and 95 per cent, and the design system calls that a bug. */
.rp .floor { background: var(--floor); color: var(--cream); padding: 110px 120px 70px 230px;
             margin-top: 110px; position: relative }
.rp .floor h3 { margin: 0 0 14px 0; font-family: var(--mono); font-size: 12px; font-weight: 400;
                letter-spacing: .14em; text-transform: uppercase; color: rgba(250,246,233,.5) }
.rp .floor .blk { margin-bottom: 46px; max-width: 900px }
.rp .floor .blk p { font-size: 20px; line-height: 1.5; opacity: 1; color: var(--cream) }
.rp .floor .blk p.big { font-size: 36px; font-weight: 800; letter-spacing: -1.2px; line-height: 1.16 }
.rp .floor .method div { font-size: 28px; font-weight: 700; letter-spacing: -.8px; line-height: 1.35 }
.rp .floor .cap { font-size: 16px; color: var(--cream) }
/* The render sizes the wave and the Cone in fixed pixels; between 900 and
   1040 the Cone ran past the window. They shrink with the column instead. */
.rp .floor img, .rp .floor svg { max-width: 100%; height: auto }
.rp .floor [class*="ri-"] { max-width: 100% }

/* ── the rail ────────────────────────────────────────────────────────────────
   As the render draws it at 1600: a tick 48 above each eyebrow, the numeral 8
   above it, and the line breaking from 16 above the eyebrow to 34 below.
   Each section draws its own segment down to the next section's break, so it
   holds at any width. Numerals at 75 per cent, and the line ends hard at the
   floor, both as the PDF has them. */

.rp .rs::before { content: ""; position: absolute; left: var(--rail-x); width: var(--rail-w);
                  background: var(--yellow); top: calc(var(--p) + 34px);
                  bottom: calc(16px - var(--p)) }
.rp .rs1::before { top: calc(var(--p1) + 34px) }
/* the short piece from the first tick down to the first break */
.rp .rs1::after { content: ""; position: absolute; left: var(--rail-x); width: var(--rail-w);
                  background: var(--yellow); top: calc(var(--p1) - 46px); height: 30px }
/* the last one runs to the floor */
.rp .rs8::before { bottom: -110px }
.rp .rp-rail { position: absolute; left: 0; top: calc(var(--p) - 48px); width: 200px;
               height: 0; z-index: 3 }
.rp .rs1 .rp-rail { top: calc(var(--p1) - 48px) }
.rp .rp-tick { position: absolute; left: 80px; top: 0; width: var(--tick-w, 60px); height: var(--tick-h, 17px) }
.rp .rp-tick path { stroke: var(--yellow) }
.rp .rp-num { position: absolute; left: 78px; top: 40px; width: 64px; text-align: center;
              font-family: var(--mono); font-size: 18px; letter-spacing: .12em;
              color: var(--ink); opacity: .75 }
.rp .rs1 { padding-top: var(--p1) }
.rp .rs2, .rp .rs3, .rp .rs4, .rp .rs5, .rp .rs6, .rp .rs7, .rp .rs8 { padding-top: var(--p) }

/* ── narrower than the render ───────────────────────────────────────────────
   Below 1300 the register's two columns leave the rows too narrow, so the
   narrative sits above its rows. */
@media (max-width: 1300px) {
  .rp .part { grid-template-columns: minmax(0, 1fr); gap: 34px }
  .rp .part .nar { max-width: 760px }
}

/* ── the phone ──────────────────────────────────────────────────────────────
   The design has no drawn phone Research. This follows the design system's
   phone rule for the descent: one column, the rail a thin line down the edge
   with the numerals tucked against it, type at the phone sizes. */
@media (max-width: 900px) {
  .rp { --p1: 56px; --p: 88px; --rail-x: 26px }
  .rp section { padding-left: 58px; padding-right: 22px }
  .rp .rp-tick { left: 4px; width: 44px; height: 13px }
  .rp .rp-num { left: 0; width: 52px; top: 42px; font-size: 12px; letter-spacing: .06em }
  .rp .hero { font-size: 30px; letter-spacing: -.9px }
  .rp .hero br, .rp h2 br { display: none }
  .rp h2 { font-size: 27px; letter-spacing: -.8px }
  .rp .lede, .rp .q .qa { font-size: 17px }
  .rp .rp-stamp { font-size: 12px; margin-top: 32px }
  .rp .q { margin-top: 44px }
  .rp .q .qq { font-size: 23px; letter-spacing: -.6px }
  .rp .five { font-size: 23px }
  .rp .five div { font-size: 23px; letter-spacing: -.6px; line-height: 1.4 }
  .rp .punch { font-size: 26px; letter-spacing: -.8px; border-bottom-width: 4px }
  .rp .part { margin-top: 52px }
  .rp .part .nar .pl { font-size: 22px }
  .rp .part .nar p { font-size: 16px }
  .rp .found { font-size: 23px; letter-spacing: -.7px }
  .rp .row { padding-left: 24px }
  .rp .row .dot { top: 22px; width: 11px; height: 11px }
  .rp .row .cl { font-size: 18px; letter-spacing: -.3px }
  .rp .row .mt { font-size: 12px; flex-direction: column; gap: 4px }
  .rp .rownote { padding-left: 24px; font-size: 12px }
  .rp .panel { margin-left: -36px; margin-right: -22px }
  .rp .regs { grid-template-columns: 1fr; margin: 12px 18px 0 18px }
  .rp .regs > div { padding: 22px 0 18px 0 }
  .rp .regs > div:last-child { padding-left: 0; border-left: 0; border-top: 1px solid var(--hair) }
  .rp .regs li { font-size: 17px }
  .rp .abs { grid-template-columns: 1fr; gap: 30px }
  .rp .abs h4 { font-size: 22px }
  .rp .abs p { font-size: 16px }
  .rp .seven .s { grid-template-columns: 1fr; gap: 4px }
  .rp .seven .s b { font-size: 19px }
  .rp .seven .s span { font-size: 16px }
  .rp .build div { font-size: 19px; letter-spacing: -.4px }
  .rp .conewrap { grid-template-columns: 1fr; gap: 20px }
  .rp .conewrap svg { width: 160px; height: auto }
  .rp .conedepth { font-size: 25px; letter-spacing: -.7px }
  .rp .floor { padding: 64px 22px 56px 22px; margin-top: 88px }
  .rp .rs8::before { bottom: -88px }
  .rp .floor .blk p { font-size: 17px }
  .rp .floor .blk p.big { font-size: 26px; letter-spacing: -.8px }
  .rp .floor .method div { font-size: 21px; letter-spacing: -.5px }
  .rp .floor .method br { display: none }
  .rp .floor .cap { font-size: 14px }
  /* the render sizes the wave and the Cone in fixed pixels */
  .rp .floor [class*="ri-"] { max-width: 100% }
  .rp .floor svg { width: 100%; height: auto }
}
/* the punch line is a link to the combine now */
.rp a.punch { color: inherit; text-decoration: none }
/* the floor Cone's two ends, above it */
.rp .floor .cone-ends { display: flex; justify-content: space-between; gap: 16px; max-width: 812px;
                        margin-bottom: 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
                        text-transform: uppercase; color: rgba(250,246,233,.62) }
.rp .floor .cone-ends span:last-child { text-align: right }