/* work/ (the Work hub): the list of kinds of marketing work. The frame is shared/site.css.
   Each row repeats the kind's name and the kind page's heading words (COPY_RULES §1). */
.sec-kinds{padding-block:8px clamp(56px,8vh,96px)}
.kinds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--col-gap)}
.kinds li{border-top:1px solid var(--hair)}
.kinds li:nth-child(-n+2){border-top:0}
.kinds li:nth-last-child(-n+2){border-bottom:1px solid var(--hair)}
.kinds a{position:relative;display:grid;gap:6px;padding:24px 48px 26px 0;transition:color var(--motion-base) var(--ease-out)}
.kinds a::after{content:"→";position:absolute;right:8px;top:24px;font-size:18px;color:var(--teal-hi);transition:transform var(--motion-base) var(--ease-out)}
.kinds span{font-size:var(--fs-base);line-height:1.5;color:var(--sub);max-width:30em}
.kinds a:hover span{color:var(--ink)}
.kinds a:hover::after{transform:translateX(4px)}
.kinds a:focus-visible{outline-offset:-2px}
@media (max-width:760px){
  .kinds{grid-template-columns:minmax(0,1fr)}
  .kinds li:nth-last-child(2){border-bottom:0}
  .kinds li:nth-child(2){border-top:1px solid var(--hair)}
  .kinds a{padding:20px 40px 22px 0}
  .kinds a::after{top:20px}
}