/* ==========================================================================
   Shop. Paper; the product shot does the lifting.

   Values from reference/build-source/shop_up.html, the render the signed off
   MattHart_Shop_FINAL.pdf was made from, scoped under .sp.
   ========================================================================== */

.sp { --rail-x: 109px; --rail-w: 3px; --tile: #F2EEDD; --soft: #2C2E30 }

.sp .n { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
         text-transform: uppercase; color: var(--mut) }
.sp section { padding: 0 120px 0 230px; position: relative }
.sp .intro h1 { margin: 0; font-size: 50px; font-weight: 900; letter-spacing: -1.8px; line-height: 1.06; max-width: 960px }
.sp .intro p { font-size: 19px; line-height: 1.55; max-width: 760px; margin-top: 22px; color: var(--soft) }
.sp h2 { margin: 0; font-size: 42px; font-weight: 800; letter-spacing: -1.4px; line-height: 1.05 }
.sp .sub { font-size: 19px; line-height: 1.5; max-width: 700px; margin-top: 16px; color: var(--soft) }
.sp .cards { display: flex; gap: 40px; margin-top: 44px; flex-wrap: wrap }
.sp .card { width: 352px }
.sp .card .sh { height: 300px; background: var(--tile); border-radius: 8px; display: flex; align-items: center;
                justify-content: center; overflow: hidden; padding: 26px }
.sp .card .sh img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; border-radius: 5px;
                    width: auto; height: auto }
.sp .card .t { font-size: 22px; font-weight: 800; letter-spacing: -.6px; line-height: 1.2; margin-top: 20px }
.sp .card .k { font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; color: var(--mut);
               margin-top: 8px; text-transform: uppercase }
.sp .card .a { display: inline-block; font-size: 17px; font-weight: 800; letter-spacing: -.3px; margin-top: 14px;
               line-height: 1.3; border-bottom: 3px solid var(--yellow); padding-bottom: 4px;
               color: var(--ink); text-decoration: none }
.sp .blockcta { display: inline-block; font-size: 17px; font-weight: 800; margin-top: 36px; background: var(--ink);
                color: var(--cream); padding: 13px 24px; border-radius: 2px; text-decoration: none }

/* ── the rail, as on About: each section draws the piece above its own break
   and the piece below it. Numerals mono 15 at 75 per cent, as the render. */
.sp .ss0 { --p: 186px }   /* the render's 170, plus where its topbar ended */
.sp .ss1, .sp .ss2, .sp .ss3, .sp .ss4, .sp .ss5, .sp .ss6, .sp .ss7, .sp .ss8 { --p: 124px }
.sp .ss { padding-top: var(--p) }
.sp .ss8 { padding-bottom: 104px }
.sp .ss::before, .sp .ss::after {
  content: ""; position: absolute; left: var(--rail-x); width: var(--rail-w); background: var(--yellow); z-index: 1 }
.sp .ss::after { top: 0; height: calc(var(--p) - 16px) }
.sp .ss0::after { top: calc(var(--p) - 46px); height: 30px }
.sp .ss::before { top: calc(var(--p) + 34px); bottom: 0 }
.sp .sp-rail { position: absolute; left: 0; top: calc(var(--p) - 48px); width: 200px; height: 0; z-index: 3 }
.sp .rp-tick { position: absolute; left: 80px; top: 0; width: 60px; height: 17px }
.sp .rp-tick path { stroke: var(--yellow) }
.sp .sp-num { position: absolute; left: 70px; top: 40px; width: 80px; text-align: center;
              font-family: var(--mono); font-size: 15px; letter-spacing: .1em; color: var(--ink); opacity: .75;
              text-transform: uppercase }

/* ── narrower: three cards need 1136; below that they wrap two, then one ── */
@media (max-width: 1100px) {
  .sp .intro h1 br { display: none }
}

/* ── the phone: one card to a row, full column width ─────────────────────── */
@media (max-width: 900px) {
  .sp { --rail-x: 26px }
  .sp section { padding-left: 58px; padding-right: 22px }
  .sp .ss0 { --p: 80px }
  .sp .ss1, .sp .ss2, .sp .ss3, .sp .ss4, .sp .ss5, .sp .ss6, .sp .ss7, .sp .ss8 { --p: 88px }
  .sp .ss8 { padding-bottom: 72px }
  .sp .rp-tick { left: 4px; width: 44px; height: 13px }
  .sp .sp-num { left: 0; width: 52px; top: 42px; font-size: 11px; letter-spacing: .04em }
  .sp .intro h1 { font-size: 30px; letter-spacing: -.9px; line-height: 1.1 }
  .sp .intro p, .sp .sub { font-size: 17px }
  .sp h2 { font-size: 27px; letter-spacing: -.8px }
  .sp .cards { gap: 36px; margin-top: 30px }
  .sp .card { width: 100% }
  .sp .card .sh { height: 260px; padding: 22px }
  .sp .card .t { font-size: 20px }
}

/* An action with nowhere to go yet shows its words without the underline: on
   this site a yellow underline is always a link (Matt, 18 Sept). */
.sp .card .a-pending, .sp .blockcta.a-pending { border-bottom-color: transparent; color: var(--mut) }